css - 保留一个 :after element on ellipsis

Question

我想在可变宽度的线后面有一个图标(复选标记)。 如果该行变得太长，我希望它被省略号截断。 但是复选标记应该保留在省略号之后

https://jsfiddle.net/Lkvt39re/

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我已将宽度设置为 80%，并希望插入 :after ..好吧，在省略号之后。

我该怎么做？

谢谢

Answer 1

尝试添加一个 ::before 伪元素，然后将其设置为向右浮动。这样，您的伪内容就不会被设置为元素宽度的限制所修剪掉。

CSS

.inner::before {
    content: 'X';
    float: right;
}

或者

可以将::after伪元素设置为父元素.outer，然后设置嵌套的.inner元素显示inline-block(允许 .outer 的伪元素落在 .inner 的初始宽度之后)具有 max-width声明；一旦超过此 max-width，您的溢出规则将适用，为您提供省略号，但仍保持 .outer 的伪元素在 text-overflow< 之后可见.

问题是试图将此伪元素声明为您还声明了宽度限制和溢出规则的元素。您需要在元素外部声明伪元素，该元素将在某个时候开始修剪内容。

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inner::before {
    content: 'X';
    float: right;
}

.outer {
  width: 200px;
}

/* Alternative */

.alternative .inner {
    max-width: 80%;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.alternative .inner.no-max-width {
    max-width: none;
}

.alternative .inner::before {
    display: none;
}

.alternative.outer::after {
    content: 'X';
    display: inline-block;
}

<div class="outer">
  <div class="inner">
    this is pretty longggggg
  </div>
</div>
<br>
<p><strong>Alternative</strong></p>
<div class="alternative outer">
  <div class="inner">
    this is pretty longgggggggggggg
  </div>
</div>
  
<div class="alternative outer">  
  <div class="inner no-max-width">
    this is pretty long
  </div>
</div>