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

我有一个使用类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>

有人可以帮忙吗？

最佳答案

每当您要使用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>

关于html - 带表的文本溢出省略号，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38200140/