为什么溢出：隐藏不工作在一个<td>？
我有一个表格单元格，我总是喜欢一个特定的宽度。 但是，它不适用于大量未占用空间的文本。 这是一个testing用例：
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>
如何让文本在盒子边缘被切掉，而不是让盒子展开？
这是同样的问题 。
你需要在table元素上设置table-layout:fixed 和一个合适的宽度，以及在表格单元格上设置overflow:hidden和white-space: nowrap 。
例子
固定宽度的列
表的宽度必须与固定宽度单元相同（或更小）。
有一个固定宽度的列：
* { box-sizing: border-box; } table { table-layout: fixed; border-collapse: collapse; width: 100%; max-width: 100px; } td { background: #F00; padding: 20px; overflow: hidden; white-space: nowrap; width: 100px; border: solid 1px #000; }
<table> <tbody> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> <tr> <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> </tr> </tbody> </table>
这就是TD的方式。 我相信这可能是因为TD元素的“显示”属性固有地设置为“表格单元”而不是“块”。
在你的情况下，替代scheme可能是将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>
可能有一些填充或cellpadding问题需要处理，你最好删除内联样式，并使用外部的CSS来代替，但这应该是一个开始。
应用CSS table-layout:fixed; （有时width:<any px or %> ）到TABLE和white-space: nowrap; overflow: hidden; white-space: nowrap; overflow: hidden; 在TD上的风格。 然后在正确的单元格或列元素上设置CSS宽度。
重要的是，固定布局表格列的宽度取决于表格第一行的单元宽度。 如果在第一行中有TH元素，并且宽度应用于TD（而不是TH），则宽度仅适用于TD的内容（可以忽略空白和溢出）。 无论设置的TD宽度如何（因为在第一行的TH上没有指定宽度），表列将均匀分布，并且列将具有[计算出的]相等的宽度; 该表格将不会根据后续行中的TD宽度重新计算列宽。 设置表格将遇到的第一个单元格元素的宽度。
或者，设置列宽的最安全的方法是在表格中使用<COLGROUP>和<COL>标记，并在每个固定宽度COL上设置CSS宽度。 当表格知道列宽时，单元格宽度相关的CSS会变得更好。
我不熟悉具体的问题，但你可以在TD内粘贴一个div等，并设置溢出。
那么这里是一个解决scheme，但我不明白为什么它的作品：
<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>
即，将单元格内容包装在一个div中。
你必须设置表格的样式属性： width和table-layout: fixed; 让“溢出：隐藏” 属性正常工作。
Imo这个效果更好，然后使用带有width样式属性的div，尤其是在使用div来进行dynamicresize计算时，表格将会有一个更简单的DOM，这使得操作更容易，因为不需要填充和边距的更正
另外，您不必为所有单元格设置宽度，只能为第一行中的单元格设置宽度。
喜欢这个：
<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>
最好的解决scheme是将一个div放入零宽度的表格单元格中。 Tbody表格单元格将从定义thead的宽度inheritance它们的宽度。 位置：相对和利差应该做的伎俩！
这是一个截图： 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>
我刚刚有一个类似的问题，首先必须使用<td>中的<div> （John MacIntyre的解决scheme由于各种原因而不适用于我）。
请注意，虽然<td><div>...</div></td>不是div的有效位置，所以我使用了<span>和display:block; 组。 它现在validation好，工作。
为了使得更简单，我build议在td里面放一个textarea来pipe理自动溢出
<td><textarea autofocus>$post_title</textarea></td>
需要改善
