表格单元格中的CSS文本溢出?

I want to use CSS text-overflow in 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- CSS overflow，这样，如果文本太长，不能放在一行中，它将使用省略号进行剪辑，而不是包装到多行。这是可能的吗?

I tried this:

我试着这样的:

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

But the white-space: nowrap seems 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.

但是留白:nowrap似乎让文本(及其单元格)不断向右扩展，将表的总宽度推到容器的宽度之外。但是，如果没有它，当文本到达单元格的边缘时，文本将继续缠绕到多行。

9 个解决方案

#1

To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work. No extra layout div's are required

要在溢出表单元格时使用省略号来裁剪文本，您需要在每个td类上设置max-width CSS属性，以便溢出起作用。不需要额外的布局div

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

For responsive layouts; use the max-width CSS 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-width CSS属性指定列的有效最小宽度，或者只使用max-width: 0;无限的灵活性。此外，包含的表将需要一个特定的宽度，通常为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]-->

#2

Why does this happen?

这为什么会发生?

It seems this section on w3.org suggests 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 jsfiddle has your code (with a few debug modifications), which works fine if it's applied to a div instead of a td. It also has the only workaround I could quickly think of, by wrapping the contents of the td in a containing div block. 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有您的代码(通过一些调试修改)，如果将代码应用到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>

#3

Specifying a max-width or 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.

指定最大宽度或固定宽度并不适用于所有情况，该表应该是流动的，并自动分隔单元格。这就是表格的作用。

Use this: http://jsfiddle.net/maruxa1j/

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

Works on IE9 and other browsers.

在IE9和其他浏览器上工作。

#4

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.

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

Add these 3 rules to your CSS:

在CSS中添加以下3条规则:

.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.

另外，将所需的最小宽度(或根本没有宽度)应用到表单元格。

Of course the fiddle: https://jsfiddle.net/9wycg99v/23/

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

#5

It seems that if you specify table-layout: fixed; on the table element, then your styles for td should take effect. This will also affect how the cells are sized, though.

如果指定表格布局:固定;在表元素上，您的td风格应该生效。这也会影响细胞的大小。

Sitepoint discusses the table-layout methods a little here: http://reference.sitepoint.com/css/tableformatting

Sitepoint在这里稍微讨论了表布局方法:http://reference.sitepoint.com/css/tableformatting

#6

If you just want the table to auto-layout

Without using max-width, or percentage column widths, or table-layout: fixed etc.

不使用最大宽度，或百分比栏宽度，或表格布局:固定等。

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 title on the divs

第三步:在歌剧中设置标题

This is good for accessibility, and is necessary for the little trick we'll use in a moment.

这对于可访问性很好，对于我们稍后要使用的小技巧也很有必要。

---

Step 4: Add a CSS ::after on the div

步骤4:添加CSS::after on the div

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:省略号。我在这里把它涂成红色以使它清楚。

(Note how the long column now has a tailing ellipsis)

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

---

Step 5: Set the colour of the div text to transparent

步骤5:将div文本的颜色设置为透明。

And we're done!

我们完成了!

#7

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 {
  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>

#8

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>

#9

This is the version that works in IE 9.

这是IE 9中的版本。

http://jsfiddle.net/s27gf2n8/

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>