CSS覆盖文本溢出：省略号

Question

如果我们有'text-overflow: ellipsis'，省略号将默认添加'...'到文本，但是我的场景我需要覆盖two stars * *。我们怎样才能做到这一点是纯CSS？

注：应该支持所有的浏览器IE9一样+和铬

随着一些民族询问例如添加这种， 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>

希望这有助于！