Question

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

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

Answer 2

你的HTML是错误的

您使用className但使用class

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

带表的文本溢出省略号

2 个答案: