Web制作のあれこれの情報を発信提供いたします

長い文章を…に省略できる方法

長い文章を…に省略できる方法はないのかな?

あるよ!では見てみよう♪

目次

長い文章を…にする

基本のCSS

See the Pen 3点リーダー by ちいうさ (@zqnixpal-the-looper) on CodePen.

CSSのみで対応(1行のみ)

-webkit-line-clamp では何行表示させるかを指定することができます。
IEではサポートされていませんが、ほとんどのモダンブラウザで使用可能です。

See the Pen Untitled by ちいうさ (@zqnixpal-the-looper) on CodePen.

WordPressに挿入

下のようなコードでトリミングする方法もあります

<?php echo wp_trim_words( get_the_title(), 20, '...' ); ?>

へ〜簡単だね♪

これからも色々教えるよ!

よかったら仲良くしてくださいね!
  • URLをコピーしました!
目次