保留:省略后的元素

Question

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

https://jsfiddle.net/Lkvt39re/

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

我将宽度设置为80%,并希望:after在省略号之后插入..well.

我怎样才能做到这一点？

谢谢

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>