如何使用CSS截斷表格中的長文本？

任何人都可以給出一個CSS例子，我如何創建一個表格，將長文本截斷爲以「...」結尾的文本？如何使用CSS截斷表格中的長文本？

<table> 
    <tr> 
     <td>aaaa</td> 
     <td>ssssssss</td> 
     <td>dddddddddddd</td> 
    </tr> 
    <tr> 
     <td>ffffffffffffffff</td> 
     <td>gggggggggggggggggggg</td> 
     <td>hhhhhhhhhhhhhhhhhhhhhhhh</td> 
    </tr> 
    <tr> 
     <td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td> 
     <td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td> 
     <td>llllllllllllllllllllllllllllllllllll</td> 
    </tr> 
</table>

來源

2012-01-11 Naor

使用text-overflow: ellipsis。您將需要修復的單元格的寬度，防止換行：

td { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

編輯：其實這是不行的。看來你需要一個容器DIV的樣式應用到：

<table> 
    <tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td> 
(snip)

然後：

td div { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden;   
    text-overflow: ellipsis; 
}

EDIT 2啊，有一種方法，但只有當你使用table-layout: fixed：

table { 
    table-layout: fixed; 
    width: 100px; 
} 

td { 
    white-space: nowrap; 
    overflow: hidden;   /* <- this does seem to be required */ 
    text-overflow: ellipsis; 
}

來源

2012-01-11 11:35:01

'overflow'不會在這裏工作，爲'td'元素'display：table-cell'默認情況下。 – 2012-01-11 11:36:02

@Rory，你說得很對。實際上它根本不起作用。可以發誓我之前做過這件事，但它似乎是不可能的，沒有額外的div :( – 2012-01-11 11:50:46

-1

這應該是你追求的：

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

請注意，CSS文本溢出是CSS3聲明，但在IE 6+，WebKit 312.3+（Safari 1.3 +/Chrome）和Opera 9+（版本< 10.7需要-o文本溢出聲明）。但是，不在Firefox < 7.0中。

爲了解決這個問題，你可以使用這個jQuery插件：http://www.bramstein.com/projects/text-overflow/

來源

2012-01-11 11:40:03 T23

這可以工作，但不是在表格中。表格單元格需要特殊情況，如@robs所示 – Nathan 2017-11-24 00:39:41

這是從@RobAgar爲我的作品很好的答案的變化。我定義了下面的CSS：

td.item-node { 
    max-width: 10em; 
} 
div.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

和HTML看起來像

<td class="item-note"> 
    <div class="ellipsis">Really super duper long item note that will truncate</div> 
</td>

這樣無需我可以指定我關心（表格單元格）的東西寬度，重複所有的白 - 空間，每個單元格溢出CSS屬性。在div上的課程也明確了它的目的是什麼。

來源

2016-12-16 16:35:15 bmode

如果需要截斷了只有一行文字使用CSS：

.truncate-text-one-line{ 
    width:80%; 
    height: 100px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

否則，使用這個腳本：

function shorten_text(text, maxLength) { 
    var ret = text; 
    if (ret.length > maxLength) { 
     ret = ret.substr(0,maxLength-3) + "..."; 
    } 
    document.write(ret); 
}

來源

2017-02-09 06:36:43 CrsCaballero

如何使用CSS截斷表格中的長文本？

回答

相關問題