🍃
【Tailwind CSS】長い文字列を三点リーダー（…）で省略する方法
決められた枠の中に収まりきれない程の文字数があった場合に、はみ出し分を三点リーダー（…）で表示したいケースがあると思います。Tailwind CSSでどのように記述するか調べてみました。
何もしないとはみ出てしまう
<!-- 全文 -->
<div class="h-24 p-4 mx-20 my-10 border rounded-lg bg-blue-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero deleniti ipsam delectus laudantium debitis doloribus hic ex repudiandae numquam nam quaerat consequuntur voluptatum est, perspiciatis obcaecati dolores maiores minus optio.
</div>
1行目の末尾に（…）表示
<!-- 1行目の末尾に（…）表示 -->
<div class="h-24 p-4 mx-20 my-10 border rounded-lg bg-blue-50 truncate">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero deleniti ipsam delectus laudantium debitis doloribus hic ex repudiandae numquam nam quaerat consequuntur voluptatum est, perspiciatis obcaecati dolores maiores minus optio.
</div>
「truncate」1つ入れるだけです。
↓参照
複数行目の末尾に（…）表示
こちら私の検索の仕方が良くなかったのか中々ヒットしなかったのですが、見つけました。
「line-clamp」を利用するのですが、その前に一手間必要です。
実装方法
- プラグインをインストール
# Using npm
npm install @tailwindcss/line-clamp
# Using Yarn
yarn add @tailwindcss/line-clamp
- tailwind.config.jsのpluginsにline-clampを設定
tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/line-clamp'),
// ...
],
}
- line-clamp-{n}でn行目の末尾を（…）で表示できる
<!-- 3行目の末尾に（…）表示 -->
<div class="h-24 p-4 mx-20 my-10 border rounded-lg bg-blue-50 line-clamp-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero deleniti ipsam delectus laudantium debitis doloribus hic ex repudiandae numquam nam quaerat consequuntur voluptatum est, perspiciatis obcaecati dolores maiores minus optio.
</div>
詳しくは↓を参照してもらえればと思います。
Discussion