CSS覆蓋文本溢出：省略號

如果我們有'text-overflow: ellipsis'，省略號將默認添加'...'到文本，但是我的場景我需要覆蓋two stars * *。我們怎樣才能做到這一點是純CSS？CSS覆蓋文本溢出：省略號

注：應該支持所有的瀏覽器IE9一樣+和鉻

隨着一些民族詢問例如添加這種， http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

來源

2016-12-26 Antguider

這樣做的，你需要的JavaScript。它不可能與純css –

你可以發佈你的代碼？ –

@priya_singh：期望CSS解決方法。希望一些CSS專家將幫助我 – Antguider

可以使用僞元素，如: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>

希望這有助於！

來源

2016-12-26 13:38:16

變化寬度：99px;字符切成一半 – Antguider

@LearnReact更新了答案。現在就試試。 –

對不起兄弟，你可以檢查寬度：89px;它正在打破 – Antguider

CSS覆蓋文本溢出：省略號

回答

相關問題