html - 如何在文本溢出后显示文本 :ellipsis

Question

这是例子

#div2 {
  white-space: nowrap;
  width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
  position: relative;
}

.test {
  position: absolute;
  top: 1px;
  right: -24px;
}

<div id="div2">This is some long text that will not fit in the box
  <div class="test">here</div>
</div>

问题是包含在带有类名 test 的 div 元素中的文本“here”应该显示在这里，并且它应该在三个点之后。

在这种情况下，文本“这里”不会完全显示。如何让它显示出来？

Answer 1

如果您想保留当前的 ​​HTML 结构，您可以简单地添加一些 padding-right 并将 right:0 设置为 test 元素。您可能会注意到 padding right 的值应考虑测试的内容，因此您必须根据需要进行调整。

#div2 {
  white-space: nowrap;
  width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
  position: relative;
  padding-right:25px;
}

.test {
  position: absolute;
  top: 1px;
  right: 0;
}

<div id="div2">This is some long text that will not fit in the box
  <div class="test">here</div>
</div>

顺便说一句，这是另一种不使用绝对位置的方法:

#div2 {
  width: 12em;
  border: 1px solid #000000;
  position: relative;
  display: flex;
}
span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div id="div2">
  <span>This is some long text that will not fit in the box</span>
  <div class="test">here</div>
</div>