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

Question

我想在表格单元格中使用CSS text-overflow，这样如果文本太长而无法放在一行上，它将使用省略号剪辑而不是换行到多行。这可能吗？

我试过了：

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

但是white-space: nowrap似乎使文本（及其单元格）不断向右扩展，推动表格的总宽度超出其容器的宽度。但是，如果没有它，当文本到达单元格边缘时，文本将继续换行到多行。

Answer 1

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

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

用于响应式布局;使用max-width CSS属性指定列的有效最小宽度，或仅使用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%;
}

历史：对于IE 9（或更低版本），您需要在HTML中使用此功能来修复特定于IE的渲染问题

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

Answer 2

指定max-width或固定宽度并不适用于所有情况，并且表格应该是流畅的并自动分隔其单元格。这就是表格的用途。

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

<td class="ellipsis"><span>This Text Overflows and is too large for its cell.</span></td>

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

适用于IE9和其他浏览器。

Answer 3

为什么会发生这种情况？

似乎this section on 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  

MDN says the same。

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

Answer 4

如果您不想将固定宽度设置为任何

下面的解决方案允许您具有较长的表格单元格内容，但不得影响父表格的宽度，也不得影响父行的高度。例如，您希望有一个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/

Answer 5

如果您在table-layout: fixed;元素上指定table，那么td的样式应该会生效。但这也会影响单元格的大小。

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

Answer 6

如果您只想让表格自动布局

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

https://jsfiddle.net/tturadqq/

工作原理：

第1步：只需让表格自动布局即可。

当有一个或多个包含大量文本的列时，它会尽可能缩小其他列，然后包装长列的文本：

第2步：将div中的单元格内容换行，然后将该div设置为max-height: 1.1em

（额外的0.1em用于在文本库下方稍微渲染的字符，如'g'和'y'的尾部）

第3步：在div上设置title

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

第4步：在div上添加CSS ::after

这是一个棘手的问题。我们设置了一个带有::after的CSS content: attr(title)，然后将其置于div的顶部并设置text-overflow: ellipsis。我在这里把它染成红色以表明它。

（注意长列现在有一个拖尾省略号）

第5步：将div文字的颜色设置为transparent

我们已经完成了！

Answer 7

当它处于百分比表宽度时，或者您无法在表格单元格上设置固定宽度。您可以应用 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>

Answer 8

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

Answer 9

我使用绝对位置的div（相对）来解决此问题。

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

就是这样。然后，您可以在div中添加top：值或将其垂直居中：

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

要在右侧保留一些空间，可以稍微减小最大宽度。

Answer 10

在我看来，这在Firefox和Chrome中都有效：

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

Answer 11

对我有用

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

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

Answer 12

这是适用于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>