我有一个表格单元格,我希望它始终是一个特定的宽度。但是,它不能处理大的无间距文本字符串。下面是一个测试用例:
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>
如何让文本在框的边缘被截断,而不是让框展开?
发布于 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,但这应该是一个开始。
发布于 2009-02-04 01:22:39
我不熟悉具体的问题,但是你可以在td里面放一个div,等等,然后在上面设置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>
https://stackoverflow.com/questions/509711
复制相似问题