no-wrap children 个 table 个元素的意外行为

Question

我有一个元素打算跨越一行。元素的宽度应该是文档的宽度。如果元素的内容溢出，应该将溢出部分剪掉，用省略号代替。

我写这篇文章 CSS 来完成：

.inner {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

但是，我没有得到预期的行为。文字溢出来了。

当我查看文档树的十层以上时，我发现祖父元素的样式为 table 和 table-cell，尽管它们也具有 100% 的显式宽度，但包裹在no-wrap child.

因为 nowrap child 使用相对宽度，宽度由 table 元素设置。

这是否有意义，是否有任何合理的解决方法？

这是一个 jsfiddle，尝试评论 tables：https://jsfiddle.net/q3jzh085/

Answer 1

您只需在 table 元素上设置 table-layout: fixed。

Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.table-cell {
  display: table-cell;
}
.inner {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="table">
  <div class="table-cell">
    <div class="inner">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  </div>
</div>

no-wrap children 个 table 个元素的意外行为

Unexpected behavior with no-wrap children of table elements

html

css

layout

css-tables