【複数行も対応可能】長過ぎるテキストを省略して末尾を三点リーダーにする方法

2021.02.04

横並びの要素の高さが、テキスト量によってバラバラになるのを抑えたりできるので、最近使うことが多くなってきます。

※IEと旧Edgeは対応していないのでご注意を！

1行の場合

.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 表示したい行数を指定する */
  overflow: hidden;
}

About Me

ユーキと申します。北海道恵庭市という札幌と新千歳空港の間でフリーランスのWebエンジニアとして活動してます。

当サイトのブログでは、主にWeb制作全般、フリーランス周りの情報など色々なノウハウや知識を載せています。
その他日々気になったこと、思ったことも書いてます。

お仕事の相談など何かありましたら、お問い合わせかツイッターのDMからお気軽にご連絡くださいませ。