0

特別な幅の div 内の 2 行だけでテキストをラップしたいと考えています。テキストが 2 行の長さを超える場合は、省略記号を表示したいと考えています。CSSを使用してそれを行う解決策はありますか?

css プロパティを使用しましtext-overflow:ellipsisた。その機能は1行のみです。また、私は - を使用しました。これwebkit-line-clamp:2は、chrome および safari ブラウザーでうまく機能します。テキストの折り返しは、すべてのブラウザー (firefox および IE9) でサポートする必要があります。

css または javacsript を使用した解決策を教えてください。

前もって感謝します。

私が観察したことの1つ..テキストが完全な2行に収まる場合、このように表示されます。

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte ...

テキストが次のように 2 行の半分に収まるとします。

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
    testtesttesttesttest                                                               ...

私は以下のように期待しています：

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
 testtesttest...

いくつかの変更を試みましたが、成功しませんでした。

4

1 に答える 1

1

このようなもので遊ぶことができます

p.ellipsis {
position:relative;
line-height:1em;
max-height:2em;      /* 2 times the line-height to show 2 lines */
overflow: hidden;
}
p.ellipsis::after {
content:"...";
font-weight:bold;
position:absolute;
top:1em;
right:0;
padding:0 20px 1px 10px;
background: white;
}

フィドルを参照してください: http://jsfiddle.net/T7B9c/

または、clamp.js を使用できます

編集:オーバーフローがないかどうかを計算するには、次のようにします。

<p id="ellipsis">lots of text</p>

var $element = $('#ellipsis');
if( $element[0].offsetHeight < $element[0].scrollHeight || $element[0].offsetWidth < $element[0].scrollWidth){
   // your element have overflow
   $element.addClass('ellipsis');
}
else{
  $element.removeClass('ellipsis');
}

次に、要素に表示されていないものがある場合にのみドットを表示します。

于 2013-05-08T05:19:10.880 に答える