Question

以下是示例

＆＃13;

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

＆＃13;

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

＆＃13;

问题是文本＆＃34; here＆＃34;这里应该显示带有类名测试的div元素，它应该在三个点之后。

在这种情况下，文字＆＃34; here＆＃34;没有完全显示。如何展示？

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>

Answer 2

这是因为div的整个内容被截断了。这就是为什么ng-repeat="_house in houses"没有显示出来的原因。

您可以尝试：

here

和CSS：

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

和jsfiddle

如何在文本溢出后显示文本：省略号

2 个答案: