如何截斷非包裝HTML表格單元格中的多餘文本並以「...」結尾

Question

我有一個HTML模板，其中將從數據庫字段導入進入<td>標記的文本。該文本可以是長度爲3到200個字符的任何文本，並且其所執行的<td>是屏幕寬度的100％。如果文本太長，爲了適應屏幕的寬度，我希望它被截斷並以「...」結尾。

我可以這樣做，因此它只能導入一定數量的字符然而，嘗試決定某些東西的意義不大，因爲這些設備的屏幕寬度可以在很大程度上變化（750到1920像素），因此它需要儘可能地顯示該屏幕，但不能包裝爲表格行的高度需要固定。

所以不是：

|Text within this cell is too long to fit in this|table cell 

將成爲

|Text within this cell is too long to fit in t...| 

理想的 「...」 將是一個超鏈接（因爲有這段文本完全存在另一頁。）

如果可能的話，Javascript解決方案可以，但首選CSS/HTML5。

Answer 1

您可以使用CSS屬性text-overflow: ellipsis。雖然插入的省略號不能用作鏈接，但您可以添加「閱讀更多」鏈接來完成此操作。