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

Question

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

我试过这个:

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

历史:对于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>

适用于IE9和其他浏览器.

Answer 3

为什么会这样？

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说了同样的.

这个jsfiddle有你的代码(有一些调试修改),如果它应用于a div而不是a ,它可以正常工作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步:设置titlediv

这对于可访问性是有益的,并且对于我们稍后将使用的小技巧是必要的.

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

这是棘手的一点.我们设置一个CSS ::after,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

我使用单元格内绝对定位的 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 9

这对我的情况有效，在 Firefox 和 Chrome 中：

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

Answer 10

将单元格内容包装在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 11

它对我有用

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

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