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>

・ホープ、このことができます：

は、以下のスニペットを見てください！