小开

为什么会发生这种情况?

这部分在w3.org似乎表明文本溢出只适用于块元素:

11.1.  Overflow Ellipsis: the ‘text-overflow’ property


text-overflow      clip | ellipsis | <string>
Initial:           clip
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no
Percentages:       N/A
Media:             visual
Computed value:    as specified

# EYZ0。

这个jsfiddle有您的代码(有一些调试修改)，如果它应用到div而不是td，它就可以正常工作。它还有我能很快想到的唯一解决方法，即将td的内容包装在包含div的块中。然而，对我来说，这看起来像是“丑陋的”标记，所以我希望其他人有更好的解决方案。测试的代码是这样的:

.

td, div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid red;
width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>


Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

小开

似乎如果您在table元素上指定了table-layout: fixed;，那么td的样式应该生效。不过，这也会影响细胞的大小。

Sitepoint在这里讨论了一些表格布局方法: # EYZ0 < / p >

小开

最佳答案

当文本溢出表格单元格时，要剪辑带有省略号的文本，您需要在每个td类上设置max-width CSS属性，以便溢出工作。不需要额外的布局div元素:

td
{
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

对于响应式布局;使用CSS属性max-width来指定列的有效最小宽度，或者使用max-width: 0;来获得无限的灵活性。同样，包含的表需要特定的宽度，通常是width: 100%;，列的宽度通常设置为总宽度的百分比

table {width: 100%;}
td
{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

历史:对于ie9(或更少)，你需要在你的HTML中有这个，以修复特定于IE的渲染问题

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

小开

这个版本可以在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>

小开

指定max-width或固定宽度并不适用于所有情况，表应该是流动的并自动设置单元格间距。这就是桌子的作用。适用于IE9和其他浏览器。

使用这个:http://jsfiddle.net/maruxa1j/

table {
width: 100%;
}
.first {
width: 50%;
}
.ellipsis {
position: relative;
}
.ellipsis:before {
content: '&nbsp;';
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>

小开

如果你不想设置固定宽度

下面的解决方案允许您拥有较长的表单元格内容，但不能影响父表的宽度，也不能影响父行的高度。例如，您希望有一个width:100%的表，它仍然对所有其他单元格应用自动大小特性。在有“注释”或“评论”列的数据网格中很有用。

将这3条规则添加到你的CSS中:

.text-overflow-dynamic-container {
position: relative;
max-width: 100%;
padding: 0 !important;
display: -webkit-flex;
display: -moz-flex;
display: flex;
vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
position: absolute;
white-space: nowrap;
overflow-y: visible;
overflow-x: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
width:100%;
top: 0;
left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
content: '-';
display: inline;
visibility: hidden;
width: 0;
}

在任何你想要动态文本溢出的表格单元格中像这样格式化HTML:

<td>
<span class="text-overflow-dynamic-container">
<span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
//...your long text here...
</span>
</span>
</td>

此外，对表格单元格应用所需的min-width(或根本不应用)。

当然是小提琴:https://jsfiddle.net/9wycg99v/23/

小开

当它以表格宽度百分比为单位时，或者你不能在表格单元格上设置固定宽度。您可以应用table-layout: fixed;使其工作。

table {
table-layout: fixed;
width: 100%;
}
td {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border: 1px solid red;
}

<table>
<tr>
<td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
<td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
</tr>
</table>

小开

如果你只是想让表格自动布局

没有使用max-width，或百分比列宽度，或table-layout: fixed等。

https://jsfiddle.net/tturadqq/

工作原理:

步骤1:让表自动布局完成它的工作。

当有一个或多个列有很多文本时，它会尽可能地缩小其他列，然后将长列的文本换行:

# EYZ1

(额外的0.1em用于显示在文本底部下方的字符，如'g'和'y'的尾部)

第三步:在div上设置title

这对可访问性有好处，并且对于我们稍后使用的小技巧是必要的。

第四步:在div上添加CSS ::after

这是一个棘手的问题。我们设置一个CSS ::after和content: attr(title)，然后将其放置在div的顶部，并设置text-overflow: ellipsis。我把它涂成红色，让它更清楚。

(注意长列现在有一个尾省略号)

步骤5:设置div文本的颜色为transparent

我们做完了!

小开

在伸缩块中包装单元格内容。作为奖励，单元格自动匹配可见宽度。

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>

小开

我解决这个问题使用单元格内的绝对定位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一点。

小开

在我的情况下，这是有效的，在Firefox和Chrome:

td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}

小开

这对我很管用

table {
width: 100%;
table-layout: fixed;
}


td {
text-overflow: ellipsis;
white-space: nowrap;
}

小开

为清洁自动大小表与省略号

如果你可以抛弃表格标签，那么现代CSS有一个更干净(IMO)的解决方案:使用grid布局。

你只需要一个div或类似的符号来表示表格，里面有单元格，例如:

<div class="table">
<div class="cell">text</div>
<div class="cell">text</div>
<div class="cell">text</div>
<div class="cell">text</div>
</div>

现在，如果我想让它成为一个2x2的表格，那么它只是一个简单的例子，为网格定义两个自动大小的列:

.table {
display: grid;
grid-template-columns: auto auto;
}

对于单元格，你只需要多写几行CSS:

.cell {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

完成工作!如果你需要确保一些列比其他列宽，那么使用fr单位或其他可用的列模板选项就可以很好地工作。

.table {
display: grid;
grid-template-columns: auto auto;
}
.cell {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
border: 1px solid black;
}

<div class="table">
<div class="cell">long long long long long long long long long long long long long long long long long long long long long long long long</div>
<div class="cell">text</div>
<div class="cell">text</div>
<div class="cell">text</div>
</div>

小开

XML

<td><div>Your overflowing content here.</div></td>

CSS

td div
{
max-height: 30vh;
overflow: auto;
}

试图为了这个非常特定的目的而打乱整个table是没有意义的。是的，有时如果你明确不想成为另一个600个div嵌套的Twitter/Facebook“开发者”，添加一个额外的元素是可以的。

CSS文本溢出表单元格?

如果你不想设置固定宽度

如果你只是想让表格自动布局

为清洁自动大小表与省略号

XML

CSS