我想在表格单元格中使用CSS文本溢出，这样，如果文本太长而不能适合一行，它将用省略号剪辑，而不是包装到多行。这可能吗?
我试了一下:
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
但是white-space: nowrap似乎使文本(及其单元格)不断向右扩展，将表的总宽度推到容器的宽度之外。但是，如果没有它，当文本到达单元格边缘时，它将继续换行为多行。
当前回答
我解决这个问题使用单元格内的绝对定位div(相对)。
td {
position: relative;
}
td > div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
就是这样。然后你可以添加一个top:值到div或垂直居中:
td > div {
top: 0;
bottom: 0;
margin: auto 0;
height: 1.5em; // = line height
}
为了在右侧获得一些空间，您可以减少max-width一点。
其他回答
在伸缩块中包装单元格内容。作为奖励，单元格自动匹配可见宽度。
table { width: 100%; } div.parent { display: flex; } div.child { flex: 1; width: 1px; overflow-x: hidden; text-overflow: ellipsis; } <table> <tr> <td> <div class="parent"> <div class="child"> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div> <div> </td> </tr> </table>
指定max-width或固定宽度并不适用于所有情况，表应该是流动的，并自动为单元格设置空间。这就是桌子的作用。适用于IE9和其他浏览器。
使用这个:http://jsfiddle.net/maruxa1j/
table { width: 100%; } .first { width: 50%; } .ellipsis { position: relative; } .ellipsis:before { content: ' '; visibility: hidden; } .ellipsis span { position: absolute; left: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <table border="1"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td class="ellipsis first"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> <td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td> </tr> </tbody> </table>
我解决这个问题使用单元格内的绝对定位div(相对)。
td {
position: relative;
}
td > div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
就是这样。然后你可以添加一个top:值到div或垂直居中:
td > div {
top: 0;
bottom: 0;
margin: auto 0;
height: 1.5em; // = line height
}
为了在右侧获得一些空间，您可以减少max-width一点。
这个版本可以在IE 9中运行。
http://jsfiddle.net/s27gf2n8/
<div style="display:table; table-layout: fixed; width:100%; " >
<div style="display:table-row;">
<div style="display:table-cell;">
<table style="width: 100%; table-layout: fixed;">
<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</table>
</div>
<div style="display:table-cell;">
Top right Cell.
</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;">
<table style="width: 100%; table-layout: fixed;">
<div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</table>
</div>
<div style="display:table-cell;">
Bottom right cell.
</div>
</div>
</div>
XML
<td><div>Your overflowing content here.</div></td>
CSS
td div
{
max-height: 30vh;
overflow: auto;
}
为了这个特定的目的而试图打乱整个表是没有意义的。是的，有时候如果你明确不想成为另一个600个div嵌套的Twitter/Facebook“开发者”，添加一个额外的元素是可以的。
