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>

希望這有助於！