みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

f:id:kimizuka:20210323000439p:plain

一行の場合

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では動きません。