：使用文本溢出省略号后节点不可见

Question

我试图显示一个指示符（橙色点），表示列表项上已发生操作。我还使用overflow: hidden;和text-overflow: ellipsis;来处理文本溢出。

我面临的问题是，当文本溢出时，指示器不可见。

＆＃13;

＆＃13;

.root {
  width: 200px;
  border: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px solid gray;
  display: flex;
}

li .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li .name:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: orange;
}

＆＃13;

<div class="root">
  <ul>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This Long Long Long Long Text Is Here
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

代码笔：https://codepen.io/anilnamde/pen/vmbzJa

Answer 1

这是因为当文本较长时，橙色点位于文本的末尾。您可以通过将position:absolute提供给:after元素来验证。

你可以做这样的事情来避免这种情况。

＆＃13;

＆＃13;

.root {
  width: 200px;
  border: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px solid gray;
  display: flex;
  position:relative;
}
li .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
li .name:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: orange;
  position : absolute;
  z-index:3;
  right:2px;
  top:2px;
}

＆＃13;

<div class="root">
  <ul>
  <li>
      <div class="name">
        This is one
      </div>
    </li>
      <li>
      <div class="name">
        This is one
      </div>
    </li>
  <li>
      <div class="name">
        This is one
      </div>
    </li>
  <li>
      <div class="name">
        This Long Long Long Long Text Is Here
      </div>
    </li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为什么会发生这种情况

伪元素被视为inline-block内容，这意味着它直接位于文本之后。

你能做什么？

您可以强制显示伪元素，方法是将其从文档流中取出position: absolute;并将其放在.name容器的末尾。

需要进行以下更改：

• 将position: relative;和padding-right: 10px;添加到li .name，这会将伪元素相对于它定位并提供一些喘息空间
• 添加position: absolute;，right: 2px;，top: 0;，bottom: 0;和margin: auto;，将伪元素定位在.name

.root {
  width: 200px;
  border: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px solid gray;
  display: flex;
}

li .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 10px;
}

li .name:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: orange;
  position: absolute;
  right: 2px;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class="root">
  <ul>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This Long Long Long Long Text Is Here
      </div>
    </li>
  </ul>
</div>

Answer 3

这是你如何使用position: relative到li .name并将li .name:after绝对定位到它的方法。向padding-right:15px提供一点li .name。

<强>段

＆＃13;

＆＃13;

    .root {
  width: 200px;
  border: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px solid gray;
  display: flex;
}
li .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  padding-right:15px;
}
li .name:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: orange;
    position: absolute;
    right: 0;
    top: 40%;
    bottom: 0;
    left: calc(100% - 10px);
    
}

＆＃13;

<div class="root">
  <ul>
  <li>
      <div class="name">
        This is one
      </div>
    </li>
      <li>
      <div class="name">
        This is one
      </div>
    </li>
  <li>
      <div class="name">
        This is one
      </div>
    </li>
  <li>
      <div class="name">
        This Long Long Long Long Text Is Here
      </div>
    </li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以相对于.name元素

绝对定位伪元素

＆＃13;

＆＃13;

li {
  border-bottom: 1px solid gray;
  display: flex;
  .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    position: relative;
    &:after {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background: orange;
      position: absolute;
      right: 10px;
      top: 7px;
    }
  }
}

＆＃13;

＆＃13;

＆＃13;