【CSS】テキスト一行に収める【簡単】

wordpressでお知らせのテキストやパンクズリストなど、文字量が変わるけれど、一行に収めたい場合のcssを使用した方法をご紹介します。

以下2つあると思います。

①最後を「…」にして省略する

お知らせの場合この方法が多いかと思います。

See the Pen
20240816_01
by mtrad_ingu (@mtrad_ingu)
on CodePen.

Tips:二行以上のときに最後を「…」としたい場合は「-webkit-line-clamp: 2;」としてください。
注意点:overflow: hidden;しているので、pタグにpaddingをつけると隠してる文字が見えてしまう

②はみ出る部分を横スクロールする

パンクズリストの場合この方法が多いかと思います。

See the Pen 20240816_02 by mtrad_ingu (@mtrad_ingu) on CodePen.

Tips:テキストの高さに余裕を持たせたい場合は「line-height」を設定

簡単!!

使用場所やデザインに合わせてつかいわけよう

  • URLをコピーしました!
目次