html - 带表格的文本溢出省略号

Question

我有一个使用 box-center 类居中的布局。现在我想添加文本溢出省略号，但它不再居中。

.box-center {
  display: table;
  table-layout: fixed;
  margin: 0 auto;

  .ellipsed {
    display: table;
    table-layout: fixed;
    white-space: nowrap;
    width: 100%;

    span {
      display: table-cell;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

我也试过添加这个，但这不是文本溢出省略号。

.ellipsed {
  white-space: nowrap;
  width: 100%;

  span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

HTML:

<div class="box-center">
  <div class="ellipsed">
    <span>Some text to be ellipsed</span>
  </div>
</div>

有人可以帮忙吗？

Answer 1

每当你想使用 text-overlfow:ellipsis 时，你需要定义元素的宽度，因为你需要告诉元素在什么宽度之后它应该隐藏和显示省略号。

请参阅这个基于简单 CSS 的虚拟示例。我只添加了一个虚拟宽度及其工作

.ellipsed {
  white-space: nowrap;
  width: 100%;
}

span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
}

<div class="box-center">
  <div class="ellipsed">
    <span>Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed Some text to be ellipsed </span>
  </div>
</div>