不折線和最大寬度

Question

我有一張桌子，它不能在任何td換行。 所有的td都具有max-width屬性。

某些td文本的長度超過max-width，我想將此文本“破壞”為該max-width，例如：

文字：“這是td中的文字”

符合td文字：“ this is”

這是我的代碼：

 .nobreaklineClass{ white-space: nowrap; } .maxwidthClass{ max-width: 30px; } 

 <table> <tr class="nobreaklineClass"> <td class="maxwidthClass">"this is the text in td" </td> </tr> </table> 

我怎樣才能做到這一點？

Answer 1

添加overflow: hidden; 到單元格：

 .nobreaklineClass{ white-space: nowrap; } .maxwidthClass{ max-width: 30px; border: 1px dotted #ddd; overflow: hidden; } 

 <table> <tr class="nobreaklineClass"> <td class = "maxwidthClass">"this is the text in td" </td> </tr> </table> 

（我添加了一個虛線邊框以使單元格大小清晰可見）

Answer 2

與Johannes類似，但帶有省略號：

 .nobreaklineClass{ white-space: nowrap; } .maxwidthClass{ max-width: 80px; border: 1px dotted #ddd; overflow: hidden; text-overflow: ellipsis; } 

 <table> <tr class="nobreaklineClass"> <td class = "maxwidthClass">this is the text in td</td> </tr> </table>