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」を設定
簡単！！
使用場所やデザインに合わせてつかいわけよう
