如何根據字符串的長度劃分html表格單元格內的字符串

我有HTML表格，其中使用一些模板引擎放置單元格的內容。
無論內容有多大或多小，我都必須確保單元的寬度應該固定。

如何根據字符串的長度劃分html表格單元格內的字符串

<td align="left" height="50px"> 
    <a href="#" style="padding-left:5px; display:block; line-height:18px;"> 
    Traditional Dhow Cruise Dinner in Dubai Creek International Ho...</a> 
</td>

殼體1：如果該含量小（解決）。
然後這個問題可以通過固定寬度的單元格來解決。

情況2：如果內容很大。
我應該確保所有可以放入單元格內的單詞都被填充，然後在最後打印'...'。我已經嘗試過使用模板引擎將字符中的字符計數到< ...>，超過了字符數。但是，這似乎並沒有工作，因爲HTML根據單詞分解了一個字符串。因此，有時甚至我的140個字符（限制）都超過了單元格的固定高度。我不介意使用任何模板引擎來生成所需的輸出。請幫忙。

來源

2016-12-29 vikas kv

顯然字你選擇了一個不符合它要顯示的信息的可視化表示。不要修復症狀，解決原因：改變你的設計。 – connexo

要求是（正如我在案例2中提到的），如果它不符合視覺表示，那麼我需要在最後放置三個點（...）。我怎樣才能做到這一點？ –

再一次，這是錯誤的方法。修復設計，而不是信息。 – connexo

添加到您的CSS

td a{ 
word-break: break-all; 
width: 150px; 
height: auto; 
}

來源

2016-12-29 11:12:37

嘗試增加text-overflow:Ellipsis錨標籤;

變化主播造型到：

padding-left:5px;display:block;line-height:18px;height:50px;‌width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;

Info

來源

2016-12-29 11:52:22 Afsar

看一看Clamp.js。這個庫通過添加省略號在HTML元素中「夾緊」內容。它適用於所有瀏覽器。或者你可以使它自動夾緊$ clamp（myParagraph，{clamp：'auto'}）;或$ clamp（myParagraph，{clamp：'35px'}）;進入給定的高度。

來源

2016-12-29 11:56:24 Dhanuka777

word-wrap: break-work 是這樣做的另一種選擇。

td a{ word-wrap: break-work; width: 180px; height: auto; }

word-wrap: break-word 最近已改爲 overflow-wrap: break-word

將包裹話超過，到下一行。
調整單詞，使它們不會中斷。

word-break: break-all

不管連續字或許多字的，打破它們在寬度限制的邊緣。（即使是在同一個字的字符）

但我認爲你需要截斷（...），這超過了TD手機的長度，所以這個你可以使用

 
    td a{ 
     white-space: nowrap;  //keep all text on one line 
     overflow: hidden;   //prevent the text to shown outside border 
     text-overflow: ellipsis; //cut off text that exceeds border with an elipsis 
    }

來源

2016-12-29 12:40:44

如何根據字符串的長度劃分html表格單元格內的字符串

回答

相關問題