CSSを使用してテキストの長さを「n」行に制限することは可能ですか(または垂直にオーバーフローする場合はカットします)。
text-overflow: ellipsis;1 行のテキストに対してのみ機能します。
原文:
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! 座って！Ut penatibus turpis
mus tincidunt! Dapibus sed aenean、magna sagittis、lorem velit
必要な出力 (2 行):
Ultrices natoque mus mattis、aliquam、cras in pellentesque
tincidunt elit purus lectus、vel ut aliquet、elementum...
非公式のline-clamp構文を使用してそれを行う方法があり、Firefox 68 以降、すべての主要なブラウザーで動作します。
body {
margin: 20px;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>IE ユーザーを気にしない限りline-height、max-heightフォールバックを行う必要はありません。
できることは次のとおりです。
.max-lines {
display: block;/* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em;
line-height: 1.8em;
}<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>ここでmax-height:= line-height:×<number-of-lines>でem。
作業中のクロスブラウザー ソリューション
この問題は何年もの間、私たち全員を悩ませてきました。
すべての場合に役立つように、CSS のみのアプローチと、css の警告が問題になる場合に備えて jQuery アプローチを用意しました。
これは私が思いついたCSS のみのソリューションで、すべての状況で機能しますが、いくつかの小さな注意事項があります。
基本はシンプルで、スパンのオーバーフローを隠し、Eugene Xa が提案する行の高さに基づいて最大の高さを設定します。
次に、含まれている div の後に、省略記号を適切に配置する疑似クラスがあります。
注意事項
このソリューションは、必要があるかどうかに関係なく、常に省略記号を配置します。
最後の行が終わりの文で終わっている場合、4 つのドットで終わる....
正当化されたテキストの配置に満足する必要があります。
省略記号はテキストの右側にあるため、見にくくなります。
コード + スニペット
.text {
position: relative;
font-size: 14px;
color: black;
width: 250px; /* Could be anything you like. */
}
.text-concat {
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
line-height: 1.2em;
text-align:justify;
}
.text.ellipsis::after {
content: "...";
position: absolute;
right: -12px;
bottom: 4px;
}
/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */<div class="text ellipsis">
<span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.
Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
</span>
</div>jQuery アプローチ
私の意見では、これが最善の解決策ですが、誰もが JS を使用できるわけではありません。基本的に、jQuery は任意の .text 要素をチェックし、あらかじめ設定された最大変数よりも多くの文字がある場合、残りを切り捨てて省略記号を追加します。
このアプローチに警告はありませんが、このコード例は基本的なアイデアを示すことのみを目的としています。次の 2 つの理由から、改善せずに本番環境でこれを使用することはありません。
1) .text 要素の内部 html を書き換えます。必要かどうか。2) 内部の html にネストされた要素がないことを確認するテストは行わないため、作成者が .text を正しく使用することに大きく依存しています。
キャッチ@markzzzをありがとう
コードスニペット
setTimeout(function()
{
var max = 200;
var tot, str;
$('.text').each(function() {
str = String($(this).html());
tot = str.length;
str = (tot <= max)
? str
: str.substring(0,(max + 1))+"...";
$(this).html(str);
});
},500); // Delayed for example only..text {
position: relative;
font-size: 14px;
color: black;
font-family: sans-serif;
width: 250px; /* Could be anything you like. */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>
<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
<!-- Working Cross-browser Solution
This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->私が見る限り、これは を使用するだけで可能でheight: (some em value); overflow: hiddenあり、それでも最後には空想がありません...。
それができない場合は、サーバー側の前処理 (テキスト フローを確実に予測することができないため難しい) または jQuery (可能ですが、おそらく複雑) なしでは不可能だと思います。
現在は使用できませんが、将来的には使用できるようになりますtext-overflow:ellipis-lastline。現在、Opera 10.60+ のベンダー プレフィックスで利用できます:例
うまく機能するソリューションがありますが、代わりに省略記号がグラデーションを使用しています。動的テキストがある場合に機能するため、楕円が必要になるほど長くなるかどうかはわかりません。利点は、JavaScript の計算を行う必要がないことと、テーブル セルを含む可変幅のコンテナーで機能し、クロスブラウザーであることです。追加の div をいくつか使用しますが、実装は非常に簡単です。
マークアップ:
<td>
<div class="fade-container" title="content goes here">
content goes here
<div class="fade">
</div>
</td>
CSS:
.fade-container { /*two lines*/
overflow: hidden;
position: relative;
line-height: 18px;
/* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
height: 36px;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
.fade {
position: absolute;
top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
right: 0;
bottom: 0;
width: 26px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
私はラインクランプが本当に好きですが、まだFirefoxをサポートしていません..だから私は数学の計算に行き、オーバーフローを非表示にします
.body-content.body-overflow-hidden h5 {
max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
overflow: hidden;
}
.body-content h5 {
font-size: 14px; /* need to know this*/
line-height:1,1; /*and this*/
}
リンクを使用してjQueryを介してこのクラスを削除および追加するとします。最大高さが63ピクセルになるように、余分なピクセルが必要になります。これは、高さが62px ですが、4 行の場合は false true が返されるため、追加のピクセルでこれが修正され、追加の問題は発生しません。
例としてこれにコーヒースクリプトを貼り付けます。デフォルトで非表示になっているリンクをいくつか使用します。クラスはread-moreとread-lessで、オーバーフローが不要なものを削除し、本文を削除します-オーバーフロー クラス
jQuery ->
$('.read-more').each ->
if $(this).parent().find("h5").height() < 63
$(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
$(this).remove()
else
$(this).show()
$('.read-more').click (event) ->
event.preventDefault()
$(this).parent().removeClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-less').show()
$('.read-less').click (event) ->
event.preventDefault()
$(this).parent().addClass("body-overflow-hidden")
$(this).hide()
$(this).parent().find('.read-more').show()
基本的なコード例、コードの学習は簡単です。スタイル CSS コメントを確認します。
table tr {
display: flex;
}
table tr td {
/* start */
display: inline-block; /* <- Prevent <tr> in a display css */
text-overflow: ellipsis;
white-space: nowrap;
/* end */
padding: 10px;
width: 150px; /* Space size limit */
border: 1px solid black;
overflow: hidden;
}<table>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
</td>
<td>
Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
</td>
<td>
Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
Ut dictum massa mi, sit amet interdum mi bibendum nec.
</td>
</tr>
<tr>
<td>
Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
nibh dui et erat.
</td>
<td>
Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
aliquet.
</td>
<td>
Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
</td>
</tr>
</tbody>
</table>私はこれを探し回っていましたが、私のウェブサイトがphpを使用していることに気付きました!!! テキスト入力でトリム機能を使用して、最大長で遊んでみませんか....
PHP を使用している場合の解決策もここにあります: http://ideone.com/PsTaI
<?php
$s = "In the beginning there was a tree.";
$max_length = 10;
if (strlen($s) > $max_length)
{
$offset = ($max_length - 3) - strlen($s);
$s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}
echo $s;
?>