🫠

指定行を超えるテキストを「...」で省略したくてline-clampを使った話

2023/10/06に公開

複数行に渡る長いテキストについて、任意の行数まで表示することとし、はみ出し部分については「...」で省略したかったので、プラグインを利用して実装。

インストール

line-clampをインストール

npm install -D @tailwindcss/line-clamp

plugins:{}で書いたら、識別子が足りないと怒られた。

tailwind.config.ts

module.exports = {
  theme: {
    // ...
  },
  plugins: {
    require('@tailwindcss/line-clamp'),
    // ...
  },
}

↓

とりあえず適当に、識別子「line-clamp」としてみた。

tailwind.config.ts

module.exports = {
  theme: {
    // ...
  },
  plugins: {
    line-clamp:require('@tailwindcss/line-clamp'),
    // ...
  },
}

line-clamp-{n}で指定行を超えるテキストが...で省略されるようになった。

sample.vue

<div class="w-1/3">
  <label class="line-clamp-2">{{ text }}</label>
</div>

↓

識別子ってそれっぽいのを書いたけど、なんでもいいのでは？
全然関係なさそうな文字列「aaa」にしてみた。

tailwind.config.ts

module.exports = {
  theme: {
    // ...
  },
  plugins: {
    aaa:require('@tailwindcss/line-clamp'),
    // ...
  },
}

動いた。

参考記事をよくみてみると、
plugins:{}じゃなくて、plugins:[]だった。

tailwind.config.ts

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

これだと識別子がいらないらしい。

元記事ちゃんと見よう。

おしまい