为什么overflow:hidden不能在<td>中工作？
为什么overflow:hidden不能在<td>中工作？
提问于 2009-02-04 01:06:06
我有一个表格单元格，我希望它始终是一个特定的宽度。但是，它不能处理大的无间距文本字符串。下面是一个测试用例：
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
如何让文本在框的边缘被截断，而不是让框展开？
回答 8
Stack Overflow用户
发布于 2009-02-04 01:23:40
这就是TD的方式。我相信这可能是因为TD元素的“display”属性被固有地设置为“table-cell”而不是“block”。
在您的情况下，另一种方法可能是将TD的内容包装在DIV中，并将宽度和溢出应用于DIV。
<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>可能有一些填充或单元填充问题需要处理，您最好删除内联样式并使用外部css，但这应该是一个开始。
Stack Overflow用户
发布于 2009-02-04 01:22:39
我不熟悉具体的问题，但是你可以在td里面放一个div，等等，然后在上面设置overflow。
Stack Overflow用户
发布于 2014-05-09 20:56:00
最好的解决方案是将div放入宽度为零的表格单元格中。Tbody表格单元格将从标题定义的宽度继承其宽度。位置:相对边距和负边距应该可以解决问题！
这是一个屏幕截图：https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<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%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/509711
复制相关文章
相似问题