Question

如果我们有'...''，

省略号会默认将'text-overflow: ellipsis添加到文本中，但我的方案需要通过two stars * *来覆盖此内容。我们如何才能实现这一目标纯CSS ？

注意：它应该支持所有浏览器，如IE9 +和chrome

有些人要求加上这个例子， http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Answer 1

您可以使用:after等伪元素来应用技巧。

请看下面的代码段：

＆＃13;

#div1 {
  position: relative;
  white-space: nowrap; 
  width: 99px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  border: 1px solid #000000;
}

#div1:after {
  content: '**';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 2px 0 0;
}

＆＃13;

<p>This div uses "text-overflow:ellipsis":</p>
<div id="div1">This is some long text that will not fit in the box</div>

＆＃13;

希望这有帮助！

CSS覆盖文本溢出：省略号

1 个答案: