blocks|key|368334|text|尝试使用max-width而不是width，表格仍然会自动计算宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|368335|即使在ie11+(具有ie8兼容模式)下也能正常工作。|368336|​|368337|td.max-width-50+{
++border:+1px+solid+black;
++max-width:+50px;
++overflow:+hidden;
++text-overflow:+ellipsis;
++white-space:+nowrap;
}|code-block|syntax|javascript|368338|<table>
++<tbody>
++++<tr>
++++++<td+class="max-width-50">Hello+Stack+Overflow</td>
++++</tr>
++++<tr>
++++++<td>Hello+Stack+Overflow</td>
++++</tr>
++++<tr>
++++++<td>Hello+Stack+Overflow</td>
++++</tr>
++</tbody>
</table>|368339|368340|jsfiddle。|368341|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fd3Zx/2/^0|4|9|G|5|0|3|4|0|0|0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|T|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Try using <code>max-width</code> instead of <code>width</code>, the table will still calculate the width automatically.</p>

<p>Works even in <code>ie11</code> (with ie8 compatibility mode).</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.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td class="max-width-50"&gt;Hello Stack Overflow&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Hello Stack Overflow&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Hello Stack Overflow&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/fd3Zx/2/" rel="noreferrer">jsfiddle</a>.</p>


blocks|key|584156|text|同样重要的是要把|type|unstyled|depth|inlineStyleRanges|entityRanges|data|584157|table-layout:fixed;|code-block|syntax|javascript|584158|添加到包含表中，因此它在IE9中也可以很好地运行(如果您使用最大宽度)。|584159|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It's also important to put</p>

<pre><code>table-layout:fixed;
</code></pre>

<p>Onto the containing table, so it operates well in IE9 (if your utilize max-width) as well.</p>


blocks|key|584192|text|如前所述，您可以使用td+{+display:+block;+}，但这违背了使用表的目的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|584193|您可以使用table+{+table-layout:+fixed;+}，但您可能希望它对某些列的行为有所不同。|584194|因此，要实现您想要的效果，最好的方法是将文本包装在<div>中，并将其应用于<div>+(而不是<td>)，如下所示：|584195|td+{
++border:+1px+solid+black;
}
td+>+div+{
++width:+50px;
++overflow:+hidden;
++text-overflow:+ellipsis;
++white-space:+nowrap;
}|code-block|syntax|javascript|584196|entityMap^0|A|M|0|5|U|0|P|5|12|5|1C|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$]]

<p>As said before, you can use <code>td { display: block; }</code> but this defeats the purpose of using a table.</p>

<p>You can use <code>table { table-layout: fixed; }</code> but maybe you want it to behave differently for some colums.</p>

<p>So the best way to achieve what you want would be to wrap your text in a <code>&lt;div&gt;</code> and apply your CSS to the <code>&lt;div&gt;</code> (not to the <code>&lt;td&gt;</code>) like this :</p>

<pre><code>td {
  border: 1px solid black;
}
td &gt; div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</code></pre>


blocks|key|584250|text|我只是提供了一个替代方案，因为我遇到了这个问题，而这里的其他答案都没有我想要的效果。因此，我使用了一个列表。现在，从语义上讲，我输出的信息既可以看作是表格数据，也可以看作是列表数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|584251|所以最后我做的是：|584252|<ul>
++++<li+class="group">
++++++++<span+class="title">...</span>
++++++++<span+class="description">...</span>
++++++++<span+class="mp3-player">...</span>
++++++++<span+class="download">...</span>
++++++++<span+class="shortlist">...</span>
++++</li>
++++
</ul>|code-block|syntax|javascript|584253|所以基本上ul是table，li是tr，span是td。|offset|length|style|CODE|584254|然后在CSS中，我将span元素设置为display:block;和float:left;+(我更喜欢这种组合而不是inline-block，因为它可以在旧版本的IE中工作，为了清除浮动效果，请参阅：http://css-tricks.com/snippets/css/clear-fix/)并使用省略号：|584255|span+{
++++display:+block;
++++float:+left;
++++width:+100%25;

++++//+truncate+when+long
++++overflow:+hidden;
++++text-overflow:+ellipsis;
++++white-space:+nowrap;
}|584256|然后，您所要做的就是设置跨度的max-widths，这将使列表具有表的外观。|584257|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/css/clear-fix/^0|0|0|0|5|2|8|5|E|2|H|2|K|4|P|2|0|A|4|J|E|Y|B|1M|C|2S|19|0|0|0|F|A|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@$K|16|L|17|M|N]|$K|18|L|19|M|N]|$K|1A|L|1B|M|N]|$K|1C|L|1D|M|N]|$K|1E|L|1F|M|N]|$K|1G|L|1H|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1I|8|@$K|1J|L|1K|M|N]|$K|1L|L|1M|M|N]|$K|1N|L|1O|M|N]|$K|1P|L|1Q|M|N]]|9|@$K|1R|L|1S|1|1T]]|A|$]]|$1|Q|3|R|5|F|7|1U|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1V|8|@$K|1W|L|1X|M|N]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Just offering an alternative as I had this problem and none of the other answers here had the desired effect I wanted. So instead I used a list. Now semantically the information I was outputting could have been regarded as both tabular data but also listed data.</p>

<p>So in the end what I did was:</p>

<pre><code>&lt;ul&gt;
    &lt;li class="group"&gt;
        &lt;span class="title"&gt;...&lt;/span&gt;
        &lt;span class="description"&gt;...&lt;/span&gt;
        &lt;span class="mp3-player"&gt;...&lt;/span&gt;
        &lt;span class="download"&gt;...&lt;/span&gt;
        &lt;span class="shortlist"&gt;...&lt;/span&gt;
    &lt;/li&gt;
    &lt;!-- looped &lt;li&gt; --&gt;
&lt;/ul&gt;
</code></pre>

<p>So basically <code>ul</code> is <code>table</code>, <code>li</code> is <code>tr</code>, and <code>span</code> is <code>td</code>.</p>

<p>Then in CSS I set the <code>span</code> elements to be <code>display:block;</code> and <code>float:left;</code> (I prefer that combination to <code>inline-block</code> as it'll work in older versions of IE, to clear the float effect see: <a href="http://css-tricks.com/snippets/css/clear-fix/" rel="nofollow">http://css-tricks.com/snippets/css/clear-fix/</a>) and to also have the ellipses:</p>

<pre><code>span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</code></pre>

<p>Then all you do is set the <code>max-widths</code> of your spans and that'll give the list an appearance of a table.</p>


blocks|key|368574|text|我没有使用省略号来解决文本溢出的问题，而是发现禁用并设置了样式的输入看起来更好，并且仍然允许用户在需要时查看和选择整个字符串。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|368575|<input+disabled='disabled'+style="border:+0;+padding:+0;+margin:+0"+/>|code-block|syntax|javascript|368576|它看起来像一个文本字段，但可以突出显示，因此对用户更友好|368577|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Instead of using ellipsis to solve the problem of overflowing text, I found that a disabled and styled input looked better and still allows the user to view and select the entire string if they need to.</p>

<pre><code>&lt;input disabled='disabled' style="border: 0; padding: 0; margin: 0" /&gt;
</code></pre>

<p>It looks like a text field but is highlight-able so more user friendly</p>


blocks|key|584328|text|检查td元素的box-sizing+css属性。我的css模板有问题，它设置为border-box的值。您需要设置box-sizing:+content-box。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|584329|entityMap^0|2|2|7|A|13|A|1L|N|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>Check <code>box-sizing</code> css property of your <code>td</code> elements. I had problem with css template which sets it to <code>border-box</code> value. You need set <code>box-sizing: content-box</code>.</p>


blocks|key|368656|text|让你的表格保持原样。只需使用应用了截断CSS的跨度将内容包装在TD中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|368657|/*+CSS+*/
.truncate+{
++++width:+50px;+/*your+fixed+width+*/
++++white-space:+nowrap;
++++overflow:+hidden;
++++text-overflow:+ellipsis;
++++display:+block;+/*+this+fixes+your+issue+*/
}


<table>
++++<tbody>
++++++++<tr>
++++++++++++<td>
++++++++++++++++<span+class="truncate">
++++++++++++++++++++Table+data+to+be+truncated+if+it's+too+long.
++++++++++++++++</span>
++++++++++++</td>
++++++++</tr>
++++</tbody>
</table>|code-block|syntax|javascript|368658|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Leave your tables as they are. Just wrap the content inside the TD's with a span that has the truncation CSS applied.</p>

<pre><code>/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

&lt;!-- HTML --&gt;
&lt;table&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;span class="truncate"&gt;
                    Table data to be truncated if it's too long.
                &lt;/span&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>


blocks|key|584421|text|我已经尝试了上面的许多解决方案，但没有一个让我觉得灵活或令人满意。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|584422|这个max-width:+1px的小技巧可以直接应用于td元素|584423|.truncated-cell+{
+++max-width:+1px;
+++white-space:+nowrap;
+++overflow:+hidden;
+++text-overflow:+ellipsis;
+}|code-block|syntax|javascript|584424|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I've tried many of the above solutions but none of them felt flexible or satisfying.</p>
<p>This little hack with max-width: 1px can be applied directly to the td element</p>
<pre><code>.truncated-cell {
   max-width: 1px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
</code></pre>


blocks|key|368736|text|.ellipsis+{
++overflow:+hidden;
++text-overflow:+ellipsis;
++display:+-webkit-box;
++-webkit-line-clamp:+1;
++-webkit-box-orient:+vertical;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|368737|上面的设置对我有效，没有改变表格的宽度。我在其中添加了一个div，并在其中添加了类省略号。|unstyled|368738|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</code></pre>
<p>The above setting worked for me, without changing table widths. I added a div inside  and added the class ellipsis to it.</p>


<p>Consider the following example: (<a href="http://jsfiddle.net/fd3Zx/1/" rel="noreferrer">live demo here</a>)</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-js lang-js prettyprint-override"><code>$(function() {
  console.log("width = " + $("td").width());
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Hello Stack Overflow&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>The output is: <code>width = 139</code>, and the ellipsis doesn't appear.</p>

<p>What am I missing here?</p>


Why doesn't CSS ellipsis work in table cell?

考虑以下示例：()​$(function() {  console.log("width = " + $("td").width());});td {  border: 1px solid black;  width: 50px;  overflow: hidden;  text-overflow: ellipsis;...

问为什么CSS省略号在表格单元格中不起作用？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么CSS省略号在表格单元格中不起作用？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么CSS省略号在表格单元格中不起作用？
EN