表格单元格中的 CSS 文本溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9789723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS text-overflow in a table cell?
提问by daGUY
I want to use CSS text-overflowin a table cell, such that if the text is too long to fit on one line, it will clip with an ellipsis instead of wrapping to multiple lines. Is this possible?
我想text-overflow在表格单元格中使用 CSS ，这样如果文本太长而无法放在一行中，它会用省略号剪辑，而不是换行到多行。这可能吗？
I tried this:
我试过这个：
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
But the white-space: nowrapseems to make the text (and its cell) continually expand out to the right, pushing the total width of the table beyond the width of its container. Without it, however, the text continues to wrap to multiple lines when it hits the edge of the cell.
但是white-space: nowrap似乎使文本（及其单元格）不断向右扩展，将表格的总宽度推到其容器的宽度之外。但是，如果没有它，文本在到达单元格边缘时会继续换行成多行。
回答by TFD
To clip text with an ellipsis when it overflows a table cell, you will need to set the max-widthCSS property on each tdclass for the overflow to work. No extra layout div's are required
要在表格单元格溢出时使用省略号剪切文本，您需要max-width在每个td类上设置CSS 属性以使溢出起作用。不需要额外的布局 div
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
For responsive layouts; use the max-widthCSS property to specify the effective minimum width of the column, or just use max-width: 0;for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;, and the columns will typically have their width set as percentage of the total width
对于响应式布局；使用max-widthCSS 属性指定列的有效最小宽度，或仅max-width: 0;用于无限灵活性。此外，包含表将需要特定的宽度，通常为width: 100%;，并且列的宽度通常设置为总宽度的百分比
table {
width: 100%;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td.columnA {
width: 30%;
}
td.columnB {
width: 70%;
}
Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue
历史：对于 IE 9（或更低版本），您需要在 HTML 中包含它，以修复特定于 IE 的渲染问题
<!--[if IE]>
<style>
table {
table-layout: fixed;
width: 100px;
}
</style>
<![endif]-->
回答by AnthumChris
Specifying a max-widthor fixed width doesn't work for all situations, and the table should be fluid and auto-space its cells. That's what tables are for.
指定max-width宽度或固定宽度并不适用于所有情况，表格应该是流动的并自动调整其单元格的间距。这就是桌子的用途。
Use this: http://jsfiddle.net/maruxa1j/
使用这个：http: //jsfiddle.net/maruxa1j/
HTML:
HTML：
<td class="ellipsis">
<span>This Text Overflows and is too large for its cell.</span>
</td>
CSS:
CSS：
.ellipsis {
position: relative;
}
.ellipsis:before {
content: ' ';
visibility: hidden;
}
.ellipsis span {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Works on IE9 and other browsers.
适用于 IE9 和其他浏览器。
回答by Jeroen
Whydoes this happen?
为什么会发生这种情况？
It seems this section on w3.orgsuggests that text-overflow applies only to block elements:
w3.org 上的这一部分似乎表明text-overflow 仅适用于块元素：
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
The MDN says the same.
该MDN说了同样的。
This jsfiddlehas your code (with a few debug modifications), which works fine if it's applied to a divinstead of a td. It also has the only workaround I could quickly think of, by wrapping the contents of the tdin a containing divblock. However, that looks like "ugly" markup to me, so I'm hoping someone else has a better solution. The code to test this looks like this:
这个jsfiddle有你的代码（有一些调试修改），如果它应用于 adiv而不是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>回答by Alph.Dev
In case you don't want to set fixed width to anything
如果您不想将固定宽度设置为任何内容
The solution below allows you to have table cell content that is long, but must not affect the width of the parent table, nor the height of the parent row. For example where you want to have a table with width:100%that still applies auto-size feature to all other cells. Useful in data grids with "Notes" or "Comment" column or something.
下面的解决方案允许您拥有很长的表格单元格内容，但不能影响父表格的宽度，也不能影响父行的高度。例如，您希望有一个width:100%仍然对所有其他单元格应用自动大小功能的表格。在带有“注释”或“注释”列或其他内容的数据网格中很有用。
Add these 3 rules to your CSS:
将这 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;
}
Format HTML like this in any table cell you want dynamic text overflow:
在您想要动态文本溢出的任何表格单元格中像这样格式化 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>
Additionally apply desired min-width(or none at all) to the table cell.
另外将所需min-width（或根本没有）应用于表格单元格。
Of course the fiddle: https://jsfiddle.net/9wycg99v/23/
当然是小提琴：https: //jsfiddle.net/9wycg99v/23/
回答by jongala
It seems that if you specify table-layout: fixed;on the tableelement, then your styles for tdshould take effect. This will also affect how the cells are sized, though.
似乎如果您table-layout: fixed;在table元素上指定，那么您的样式td应该生效。不过，这也会影响单元格的大小。
Sitepoint discusses the table-layout methods a little here: http://reference.sitepoint.com/css/tableformatting
Sitepoint 在这里稍微讨论了表格布局方法：http: //reference.sitepoint.com/css/tableformatting
回答by Cameron Price-Austin
If you just want the table to auto-layout
如果您只想让表格自动布局
Withoutusing max-width, or percentage column widths, or table-layout: fixedetc.
不使用max-width, 或百分比列宽table-layout: fixed等。
https://jsfiddle.net/tturadqq/
https://jsfiddle.net/tturadqq/
How it works:
这个怎么运作：
Step 1: Just let the table auto-layout do its thing.
第 1 步：让表格自动布局完成它的工作。
When there's one or more columns with a lot of text, it will shrink the other columns as much as possible, then wrap the text of the long columns:
当有一列或多列有大量文本时，它会尽可能缩小其他列，然后将长列的文本换行：
Step 2: Wrap cell contents in a div, then set that div to max-height: 1.1em
第 2 步：将单元格内容包装在一个 div 中，然后将该 div 设置为 max-height: 1.1em
(the extra 0.1em is for characters which render a bit below the text base, like the tail of 'g' and 'y')
（额外的 0.1em 用于在文本基础下方渲染的字符，例如 'g' 和 'y' 的尾部）
Step 3: Set titleon the divs
第 3 步：title在 div 上设置
This is good for accessibility, and is necessary for the little trick we'll use in a moment.
这有利于可访问性，并且对于我们稍后将使用的小技巧是必要的。
Step 4: Add a CSS ::afteron the div
第 4 步：::after在 div 上添加 CSS
This is the tricky bit. We set a CSS ::after, with content: attr(title), then position that on top of the div and set text-overflow: ellipsis. I've coloured it red here to make it clear.
这是棘手的一点。我们设置一个 CSS ::after，使用content: attr(title)，然后将其放置在 div 的顶部并设置text-overflow: ellipsis。为了清楚起见，我在这里将其涂成红色。
(Note how the long column now has a tailing ellipsis)
（注意长列现在有一个拖尾省略号）
Step 5: Set the colour of the div text to transparent
第 5 步：将 div 文本的颜色设置为 transparent
And we're done!
我们完成了！
回答by Stickers
When it's in percentage table width, or you can't set fixed width on table cell. You can apply table-layout: fixed;to make it work.
当它处于表格宽度的百分比时，或者您无法在表格单元格上设置固定宽度。您可以申请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>回答by abbr
Wrap cell content in a flex block. As a bonus, cell auto fits visible width.
将单元格内容包装在 flex 块中。作为奖励，单元格自动适应可见宽度。
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>回答by Kjetil Hansen
I solved this using an absolutely positioned div inside the cell (relative).
我使用单元格（相对）内绝对定位的 div 解决了这个问题。
td {
position: relative;
}
td > div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
That's it. Then you can either add a top: value to the div or vertically center it:
就是这样。然后你可以添加一个 top: 值到 div 或垂直居中它：
td > div {
top: 0;
bottom: 0;
margin: auto 0;
height: 1.5em; // = line height
}
To get some space on the right side, you can reduce the max-width a little.
为了在右侧获得一些空间，您可以稍微减少最大宽度。
回答by user1338062
This worked in my case, in both Firefox and Chrome:
这在我的情况下，在 Firefox 和 Chrome 中都有效：
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
