blocks|key|684261|text|这是@RobAgar中答案的变体，对我来说效果很好。我定义了以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|684262|td.item-node+{
+++max-width:+10em;
}
div.ellipsis+{
+++white-space:+nowrap;
+++overflow:+hidden;
+++text-overflow:+ellipsis;
}|code-block|syntax|javascript|684263|HTML看起来像这样|684264|<td+class="item-note">
+++<div+class="ellipsis">Really+super+duper+long+item+note+that+will+truncate</div>
</td>|684265|这样，我就可以在我关心的东西(表格单元格)上指定宽度，而不必为每个单元格重复所有空白、溢出的CSS属性。div上的类也清楚地说明了它的用途。|684266|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This is a variation on the answer from @RobAgar that works well for me. I define the following CSS:</p>

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

<p>And the HTML looks like</p>

<pre><code>&lt;td class="item-note"&gt;
   &lt;div class="ellipsis"&gt;Really super duper long item note that will truncate&lt;/div&gt;
&lt;/td&gt;
</code></pre>

<p>This way I can specify the width on the thing I care about (the table cell) without having to repeat all the white-space, overflow CSS properties for each cell.  The class on the div also makes it clear what its purpose is.</p>


blocks|key|468318|text|如果只需要截断一行文本，请使用以下css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|468319|.truncate-text-one-line{
++++width:80%25;
++++height:+100px;
++++overflow:+hidden;
++++white-space:+nowrap;
++++text-overflow:+ellipsis;
}|code-block|syntax|javascript|468320|否则，请使用以下脚本：|468321|function+shorten_text(text,+maxLength)+{
++++var+ret+=+text;
++++if+(ret.length+>+maxLength)+{
++++++++ret+=+ret.substr(0,maxLength-3)+%2B+"...";
++++}
++++document.write(ret);
}|468322|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If you need truncate text for just one line use this css:</p>

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

<p>Otherwise, use this script:</p>

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


blocks|key|684486|text|css文本溢出:省略号；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|684487|​|684488|td+{
++++display:+inline-block;
++++width:+150px;
++++white-space:+nowrap;
++++overflow:+hidden+!important;
++++text-overflow:+ellipsis;
++++}|code-block|syntax|javascript|684489|<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>lllllllllllllllllllllllddddddddddddddddddddddddddddddddddddlllllllllllll</td>
++++</tr>
</table>|684490|684491|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>css text-overflow: ellipsis;</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>td {
    display: inline-block;
    width: 150px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;aaaa&lt;/td&gt;
        &lt;td&gt;ssssssss&lt;/td&gt;
        &lt;td&gt;dddddddddddd&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;ffffffffffffffff&lt;/td&gt;
        &lt;td&gt;gggggggggggggggggggg&lt;/td&gt;
        &lt;td&gt;hhhhhhhhhhhhhhhhhhhhhhhh&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;jjjjjjjjjjjjjjjjjjjjjjjjjjjj&lt;/td&gt;
        &lt;td&gt;kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk&lt;/td&gt;
        &lt;td&gt;lllllllllllllllllllllllddddddddddddddddddddddddddddddddddddlllllllllllll&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with "..."?</p>

<p>Here is the example: <a href="http://jsfiddle.net/NpABe/">http://jsfiddle.net/NpABe/</a></p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;aaaa&lt;/td&gt;
        &lt;td&gt;ssssssss&lt;/td&gt;
        &lt;td&gt;dddddddddddd&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;ffffffffffffffff&lt;/td&gt;
        &lt;td&gt;gggggggggggggggggggg&lt;/td&gt;
        &lt;td&gt;hhhhhhhhhhhhhhhhhhhhhhhh&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;jjjjjjjjjjjjjjjjjjjjjjjjjjjj&lt;/td&gt;
        &lt;td&gt;kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk&lt;/td&gt;
        &lt;td&gt;llllllllllllllllllllllllllllllllllll&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>


How can I truncate long texts in a table using CSS?

谁能给出一个CSS示例，说明如何创建一个表格，其中长文本被截断为以"...“结尾的文本？下面是示例：<table>    <tr>        <td>aaaa</td>        <td>ssssssss</td>        <td>dddddddddddd</td>    </tr>    <tr>   ...

问如何使用CSS截断表中的长文本？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS截断表中的长文本？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS截断表中的长文本？
EN