CSS 覆盖文本溢出 : ellipsis

Question

默认情况下，如果我们有 'text-overflow: ellipsis'，省略号会在文本中添加 '...'，但我的场景需要通过 两颗星 * *。 纯 CSS 如何实现？

注意:需要支持IE9+、chrome等所有浏览器

作为一些人问的例子添加这个， http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Answer 1

你可以使用像 :after 这样的伪元素来应用一个技巧。

看看下面的片段:

#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;
}

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

希望这对您有所帮助!