blocks|key|1420070|text|好吧，这里有一个解决方案给你，但我真的不明白为什么它是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420071|<html><body>
++<div+style="width:+200px;+border:+1px+solid+red;">Test</div>
++<div+style="width:+200px;+border:+1px+solid+blue;+overflow:+hidden;+height:+1.5em;">My+hovercraft+is+full+of+eels.++These+pretzels+are+making+me+thirsty.</div>
++<div+style="width:+200px;+border:+1px+solid+yellow;+overflow:+hidden;+height:+1.5em;">
++This_is_a_terrible_example_of_thinking_outside_the_box.
++</div>
++<table+style="border:+2px+solid+black;+border-collapse:+collapse;+width:+200px;"><tr>
+++<td+style="width:200px;+border:+1px+solid+green;+overflow:+hidden;+height:+1.5em;"><div+style="width:+200px;+border:+1px+solid+yellow;+overflow:+hidden;">
++++This_is_a_terrible_example_of_thinking_outside_the_box.
+++</div></td>
++</tr></table>
</body></html>|code-block|syntax|javascript|1420072|也就是说，将单元格内容包装在div中。|1420073|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>Well here is a solution for you but I don't really understand why it works:</p>

<pre><code>&lt;html&gt;&lt;body&gt;
  &lt;div style="width: 200px; border: 1px solid red;"&gt;Test&lt;/div&gt;
  &lt;div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;"&gt;My hovercraft is full of eels.  These pretzels are making me thirsty.&lt;/div&gt;
  &lt;div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;"&gt;
  This_is_a_terrible_example_of_thinking_outside_the_box.
  &lt;/div&gt;
  &lt;table style="border: 2px solid black; border-collapse: collapse; width: 200px;"&gt;&lt;tr&gt;
   &lt;td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"&gt;&lt;div style="width: 200px; border: 1px solid yellow; overflow: hidden;"&gt;
    This_is_a_terrible_example_of_thinking_outside_the_box.
   &lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>Namely, wrapping the cell contents in a div.</p>


blocks|key|1420104|text|我不熟悉具体的问题，但是你可以在td里面放一个div，等等，然后在上面设置overflow。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420105|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I'm not familiar with the specific issue, but you could stick a div, etc inside the td and set overflow on that.</p>


blocks|key|1635038|text|这就是TD的方式。我相信这可能是因为TD元素的“display”属性被固有地设置为“table-cell”而不是“block”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1635039|在您的情况下，另一种方法可能是将TD的内容包装在DIV中，并将宽度和溢出应用于DIV。|1635040|<td+style="border:+solid+green+1px;+width:200px;">
++++<div+style="width:200px;+overflow:hidden;">
++++++++This_is_a_terrible_example_of_thinking_outside_the_box.
++++</div>
</td>|code-block|syntax|javascript|1635041|可能有一些填充或单元填充问题需要处理，您最好删除内联样式并使用外部css，但这应该是一个开始。|1635042|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>That's just the way TD's are. I believe It may be because the TD element's 'display' property is inherently set to 'table-cell' rather than 'block'.</p>

<p>In your case, the alternative may be to wrap the contents of the TD in a DIV and apply width and overflow to the DIV.</p>

<pre><code>&lt;td style="border: solid green 1px; width:200px;"&gt;
    &lt;div style="width:200px; overflow:hidden;"&gt;
        This_is_a_terrible_example_of_thinking_outside_the_box.
    &lt;/div&gt;
&lt;/td&gt;
</code></pre>

<p>There may be some padding or cellpadding issues to deal with, and you're better off removing the inline styles and using external css instead, but this should be a start.</p>


blocks|key|1635117|text|您必须设置该表的样式属性：width和table-layout:+fixed;，以使“overflow:hidden；”属性正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1635118|Imo这比使用带有width样式属性的div更好，特别是在使用它进行动态大小调整计算时，表将有一个更简单的DOM，这使得操作更容易，因为不需要对填充和边距进行更正|1635119|另外，您不必为所有单元格设置宽度，而只需为第一行中的单元格设置宽度。|1635120|如下所示：|1635121|<table+style="width:0px;table-layout:fixed">
<tr>
++++<td+style="width:60px;">
++++++++Id
++++</td>
++++<td+style="width:100px;">
++++++++Name
++++</td>
++++<td+style="width:160px;overflow:hidden">
++++++++VeryLongTextWhichShouldBeKindOfTruncated
++++</td>
</tr>
<tr>
++++<td+style="">
++++++++Id
++++</td>
++++<td+style="">
++++++++Name
++++</td>
++++<td+style="overflow:hidden">
++++++++VeryLongTextWhichShouldBeKindOfTruncated
++++</td>
</tr>
</table>|code-block|syntax|javascript|1635122|entityMap^0|D|5|J|K|0|9|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|12|8|@]|D|@]|E|$O|P]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>You'll have to set the table's style attributes: <code>width</code> and <code>table-layout: fixed;</code> to let  the 'overflow: hidden;' attribute work properly.</p>

<p>Imo this works better then using divs with the <code>width</code> style attribute, especially when using it for dynamic resizing calculations, the table will have a simpler DOM which makes manipulation easier because corrections for padding and margin are not required </p>

<p>As an extra, you don't have to set the width for all cells but only for the cells in the first row.</p>

<p>Like this:</p>

<pre><code>&lt;table style="width:0px;table-layout:fixed"&gt;
&lt;tr&gt;
    &lt;td style="width:60px;"&gt;
        Id
    &lt;/td&gt;
    &lt;td style="width:100px;"&gt;
        Name
    &lt;/td&gt;
    &lt;td style="width:160px;overflow:hidden"&gt;
        VeryLongTextWhichShouldBeKindOfTruncated
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td style=""&gt;
        Id
    &lt;/td&gt;
    &lt;td style=""&gt;
        Name
    &lt;/td&gt;
    &lt;td style="overflow:hidden"&gt;
        VeryLongTextWhichShouldBeKindOfTruncated
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>


blocks|key|1420328|text|最好的解决方案是将div放入宽度为零的表格单元格中。Tbody表格单元格将从标题定义的宽度继承其宽度。位置:相对边距和负边距应该可以解决问题！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420329|这是一个屏幕截图：https://flic.kr/p/nvRs4j|offset|length|1420330|<body>

<style>
++++.cropped-table-cells,
++++.cropped-table-cells+tr+td+{+
++++++++margin:0px;
++++++++padding:0px;
++++++++border-collapse:collapse;
++++}
++++.cropped-table-cells+tr+td+{
++++++++border:1px+solid+lightgray;
++++++++padding:3px+5px+3px+5px;
++++}
++++.no-overflow+{
++++++++display:inline-block;
++++++++white-space:nowrap;
++++++++position:relative;+/*+must+be+relative+*/
++++++++width:100%25;+/*+fit+to+table+cell+width+*/
++++++++margin-right:-1000px;+/*+technically+this+is+a+less+than+zero+width+object+*/
++++++++overflow:hidden;
++++}
</style>


<table+class="cropped-table-cells">
++++<thead>
++++++++<tr>
++++++++++++<td+style="width:100px;"+width="100"><span>ORDER<span></td>
++++++++++++<td+style="width:100px;"+width="100"><span>NAME<span></td>
++++++++++++<td+style="width:200px;"+width="200"><span>EMAIL</span></td>
++++++++</tr>
++++</thead>
++++<tbody>
++++++++<tr>
++++++++++++<td><span+class="no-overflow">123</span></td>
++++++++++++<td><span+class="no-overflow">Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit</span></td>
++++++++++++<td><span+class="no-overflow">sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.</span></td>
++++</tbody>
</table>
</body>|code-block|syntax|javascript|1420331|entityMap|0|LINK|mutability|MUTABLE|url|https://flic.kr/p/nvRs4j^0|0|9|O|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Best solution is to put a div into table cell with zero width.
Tbody table cells will inherit their widths from widths defined the thead.
Position:relative and negative margin should do the trick!</p>

<p>Here is a screenshot:
<a href="https://flic.kr/p/nvRs4j" rel="noreferrer">https://flic.kr/p/nvRs4j</a></p>

<pre><code>&lt;body&gt;
&lt;!-- SOME CSS --&gt;
&lt;style&gt;
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
&lt;/style&gt;

&lt;!-- CROPPED TABLE BODIES --&gt;
&lt;table class="cropped-table-cells"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;td style="width:100px;" width="100"&gt;&lt;span&gt;ORDER&lt;span&gt;&lt;/td&gt;
            &lt;td style="width:100px;" width="100"&gt;&lt;span&gt;NAME&lt;span&gt;&lt;/td&gt;
            &lt;td style="width:200px;" width="200"&gt;&lt;span&gt;EMAIL&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;span class="no-overflow"&gt;123&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span class="no-overflow"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/span&gt;&lt;/td&gt;
            &lt;td&gt;&lt;span class="no-overflow"&gt;sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/span&gt;&lt;/td&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;
</code></pre>


blocks|key|1420373|text|为了简单起见，我建议在td中放置一个文本区域，它可以自动管理溢出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420374|<td><textarea+autofocus>$post_title</textarea></td>|offset|length|style|CODE|1420375|需要改进|1420376|entityMap^0|0|0|1F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>to make more simple
i propose to put an textarea inside the td
wich is manage automaticly the overflow</p>

<p><code>&lt;td&gt;&lt;textarea autofocus&gt;$post_title&lt;/textarea&gt;&lt;/td&gt;</code></p>

<p>need to be ameliorate</p>


blocks|key|1420402|text|<style>
++++.col+{display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space:+nowrap;}
</style>
<table>
++++<tr>
++++++++<td+class="col">123456789123456789</td>
++++</tr>
</table>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1420403|显示123456|unstyled|1420404|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>&lt;style&gt;
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
&lt;/style&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;td class="col"&gt;123456789123456789&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>displays 123456</p>


blocks|key|1420422|text|最简单、最有效的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1420423|table+{+table-layout:+fixed+}

table+td+{+++++
++++white-space:+nowrap;
++++overflow:+hidden;
++++text-overflow:+ellipsis;+
}|code-block|syntax|javascript|1420424|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>Easiest and simplest solution that works: </p>

<pre><code>table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}
</code></pre>


<p>I've got a table cell that I would always like to be a particular width. However, it doesn't work with large strings of unspaced text. Here's a test case:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        This_is_a_terrible_example_of_thinking_outside_the_box.
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>How do I get the text to be cut off at the edge of the box, rather than having the box expand?</p>


Why does overflow:hidden not work in a <td>?

我有一个表格单元格，我希望它始终是一个特定的宽度。但是，它不能处理大的无间距文本字符串。下面是一个测试用例：​td {  border: solid green 1px;  width: 200px;  overflow: hidden;}<table>  <tbody>    <tr>      <td>      ...

问为什么overflow:hidden不能在<td>中工作？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么overflow:hidden不能在<td>中工作？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么overflow:hidden不能在<td>中工作？
EN