CSSで範囲からはみ出したテキストを省略して...にする（一行の場合・複数行の場合） ✏️

一行の場合

text-overflowを使います。

developer.mozilla.org

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

text-overflowをellipsisに設定しつつ、overflow:hiddenではみ出した箇所を非表示に、white-spaceをnowrapにして折り返しを禁止すればOKです。

※ 横幅を指定していないので、ウィンドウサイズを狭めてみてください

複数行の場合

-webkit-line-clampを使います。

developer.mozilla.org

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

• webkit-line-clampで行数を指定できます。

上記例では2行を超えた時に...で省略します。

• overflowをhiddenにする

に加え、

• displayを-webkit-box、もしくは、-webkit-inline-boxにする
• webkit-box-orientをverticalにする

の必要があります。

※ 横幅を指定していないので、ウィンドウサイズを狭めてみてください

ベンタープレフィックス（webkit）がついていますが、Firefoxでも動きます。
IEでは動きません。