テキストが飛び回らないようにしてください~_html/css_WEB-ITnose

ウェブページのレイアウトを規則的にするために、多くの場合、テキスト段落の長さと高さを制御する必要があります。

自信を持ってこれらの単語の DIV フレームを描画したところ、これらの単語は私たちが想像していたよりもはるかにエッチであることがわかりました。

 <div style="width:800px;height:50px;border:1px solid red;">  调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的   文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。 </div>

実行結果は次のとおりです:

このとき、図に示すように、実行中の単語を非表示にするためにoverflow:hiddenを追加します

ピンチしないでくださいこれを見て、図に示すように、空白の -space:nowrap を追加します:

まだ十分に美しくありませんが、ここに別のテキスト オーバーフロー: 省略記号があります。図に示すように:

ずっと気分が良くなりました....

さて、偉い人は笑わせてください、実は私はここで質問をしたいのです: テキストを 3 行表示させ、最後の行の末尾にあるあふれたテキストを省略記号に置き換えるにはどうすればよいですか? ??

教えてください