折れた場合、テキストのn番目（私の場合は2番目）の行にドットを表示したい。私はthisとthis答えを見ましたが、私の場合は問題を解決することができませんでした。CSSで折れた場合のテキストのn番目の行にドットを表示
ここにはfiddleがあります。
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
/*The problematic part is below*/
white-space:nowrap;
text-overflow: ellipsis;
}
解決方法1：
は、2行のためのWebKitのみ-webkit-line-clampプロパティを使用します。
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
/*The problematic part is below*/
white-space:nowrap;
text-overflow: ellipsis;
}
.overme {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>溶液2
右下隅に位置合わせ:after擬似要素を、使用。 これは、テキストが静的で、コンテナをあふれさせることが事前にわかっている場合にのみ機能します。
.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
position: relative;
}
.overme:after {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
content: '...';
}<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>ソリューション3 - クロスブラウザ
このJSソリューションは、コンテンツのテキストに対する親コンテナ（DIV）の高さを比較します。テキストの高さが親の高さよりも大きい場合は、.overflowsクラスが親に追加されます。
これをテストするには、親にすべて収まるようにテキストを削除します。あなたはもうドットが見えません。
$(".overme").each(function() {
var $elem = $(this);
$elem.addClass($elem[0].scrollHeight > $elem.height() ? 'overflows' : null);
});.overme {
width: 300px;
height: 60px;
line-height: 30px;
overflow:hidden;
font-size: 30px;
color: red;
background: #333;
position: relative;
}
.overme.overflows:after {
display: inline-block;
background: #333;
position: absolute;
right: 2px;
bottom: 0;
content: '...';
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overme">
how much wood can a woodchuck chuck if a woodchuck could chuck wood?
</div>Webkit以外のブラウザ用のラインクランプの代替手段はありますか？ – Yulian
@Yulian Webkitブラウザだけがサポートしているようです。動的テキストのためのクロスブラウザソリューションを私が考えることができる唯一の方法は、JSで行うことです。 –
は、それがこれで私を助けて、あなたが探して結果を達成するためのさまざまな方法でラインクランプを紹介し、このポストCSS Tricksを見ています。
あなたは 'ホワイトスペースと述べhttp://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ – fcalderan
参照：NOWRAP;'ので、どのようにテキスト2行目に折り返しますか？そして、それ以外にも、CSSではできません.JavaScriptを使用する必要があります。興味がありますか？ jsのない解決法がありますが、テキストの長さが分からないので、テキストの後ろにドットを挿入するのに問題があります。 –
http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-linesあなたに役立つかもしれません。 –