Question

我有一个旨在跨越一条线的元素。宽度元素的宽度应该是文档的宽度。如果元素的内容溢出，则应该剪切溢出并用省略号替换。

我写了这个CSS来实现这个目标：

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

但是，我没有收回预期的行为。文字刚刚溢出。

当我在文档树上看到十层时，我发现祖父母元素的样式为table和table-cell，即使它们的明确宽度为100％，也包含在包儿。

因为nowrap子项使用了相对宽度，所以宽度由表元素设置。

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

这是一个jsfiddle，尝试对表格进行评论：https://jsfiddle.net/q3jzh085/

Answer 1

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

单元格使用overflow属性来确定是否剪切任何溢出的内容，但仅当表格具有已知宽度时;否则，它们不会溢出细胞。

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

表元素的无包装子元素的意外行为

1 个答案: