Question

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

.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（允许{{1}的伪元素在声明.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;
}

Answer 2

Devman，您需要为伪元素赋予一些形状，并将其定义为内联块或块元素。然后，您可以设置适合您样式的尺寸。

查看此编辑：

.inner {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
  /** give your container some extra space for the pseudo **/ 
  padding-right: 25px;
}

.inner::after {
  content: 'X';
  color:red;
  /** define it as a "block" element and add dimension **/
  display: inline-block;
  height: 1.0rem;
  width: 1.0rem;

}

.outer {
  width: 180px;
}

http://codepen.io/jonrandahl/pen/rLMKwR

保留：省略后的元素

2 个答案: