空白の空白のスタイルの続行 "..."

Question

空白を適用しています。私はそれがnowrapスタイルで切り捨てられている場合、テキストの最後に標準 "..."を得ることが可能かどうか疑問に思っています。これはCSSが処理できるものですか？それともJavascriptが必要ですか？

ありがとうございました。

Answer 1

Firefoxの（そしておそらくいくつかの他）のサポート：

text-overflow: ellipsis; 

が、それは任意の手段によって、クロスブラウザではありません。クロスブラウザを使用するにはjavascriptを使用する必要があります。私は過去にこれをやった一つの方法は次のとおりです。

は

<div class="text"> 
    text goes here 
    <div class="ellipsis">...</div> 
</div> 

.text { 
    position : relative; 
} 

.text .ellipsis { 
    display : none; 
} 
.text.long .ellipsis { 
    display : block; 
    position : absolute; 
    right  : 0px; 
    background : #FFF; 
} 

、あなたのjsのは、単にこのようなものである（jQueryのを使用して）：

$('.text').each(function(){ 
    var $this = $(this); 
    $this[ ($this.width() > $this.outerWidth()) ? 'addClass' : 'removeClass' ] 
     ('long'); 
}); 

Answer 2

ブラウザのサポートを想定すると、それは別の一見のために動作しない場合があります関係のない理由。
前提条件：あなたのテキストコンテンツは、そのスタイル
overflow:hidden、whitespace:nowrapとtext-overflow:ellipsis
私の観測がされている、その含むブロックの位置財産である「相対的」でなければなりません含むブロックの内部にあります。省略記号は、そのが絶対的にの位置にある場合は表示されず、テキストは単純にクリップされます。

答えがここにあります。 absolute vs relative position width & height