【Nuxt.js/Vue.js】 複数行の文字を省略して末尾を三点リーダーにする方法 (IE11も対応)

目次

・3点リーダー対応について
・cssでの3点リーダー対応
・Nuxt.js/Vue.jsでの3点リーダー対応
・demo

3点リーダー対応について

スマホなどのでは特段気にせずにcssのみで対応ができますが、IE11ではcssのみでは対応できず、jsなどを別途実装しないと対応しきれないですが、Nuxt.js/Vue.jsでは簡単に対応可能でしたのでその辺りをサクッと紹介したいと思います。

cssでの3点リーダー対応

cssでの対応としては

plane_txt

<p class="lineClamp">cssのみでテキストが3点リーダーになるけどIE11では対応しとらんよ。</p>

css_only_line_clamp

.lineClamp {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

この内容で対応できちゃいますね。

でも、先ほども話したようにIE11では対応してないのです・・・
IEはもう無視するという選択もありかと。

Nuxt.js/Vue.jsでの3点リーダー対応

さて、本記事の本題になります。
Nuxt.js/Vue.jsでの対応は高さや幅で3点リーダーにするcssのやり方とは別で文字数で3点リーダーにします。
コードとしては下記になります。

Nuxt.js/Vue.js_version_line_clamp

<template>
 <div class="contents">
   <h2>Nuxt.js / Vue.js version line clamp</h2>
   <div class="textBox">
     <p>dataでtextを入れる version</p>
     <p>{{ text | omittedText }}</p>
   </div>
   <div class="textBox">
     <p>直接文字を入れる version</p>
     <p>{{ 'ここに文字をいれてみるよ' | omittedText }}</p>
   </div>
   <div class="textBox">
     <p>20文字以上で３点リーダー version</p>
     <p>{{ 'ここに文字をいれてみるよ。さて、どこまで表示されるかな。' | omittedText20 }}</p>
   </div>
 </div>

</template>

<script>
export default {
 data () {
   return {
     text: "0123456789101112",
   }
 },
  filters: {
    omittedText(text) {
     // 11文字目以降は"…"
     return text.length > 10 ? text.slice(0, 10) + "…" : text;
    },
    omittedText20(text) {
     // 20文字目以降は"…"
     return text.length > 20 ? text.slice(0, 20) + "…" : text;
    }
  },
}
</script>

<style lang="scss" scoped>
  .textBox {
    & + & {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 2px solid #ddd;
    }
    p {
      margin: 0;
    }
  }
</style>

filterとsliceを使って3点リーダー処理をしています。

filterに関しては、
{{ }} Mustache構文内にfilter名をパイプ記号( | )で繋げます。

あと、sliceに関しては、
指定文字を抜き出します。
今回は10文字目まで(0〜9)を表示と20文字目まで(0〜19)を表示を試しています。

sliceは、
指定番号〜後ろの指定番号より前を抜き出します。
slice(2) = 2番目〜を抜き出す。
slice(0, 10) = 0番目〜9文字目までを抜き出す。
となります。

filters

 filters: {
   omittedText(text) {
     // 11文字目以降は"…"
     return text.length > 10 ? text.slice(0, 10) + "…" : text;
    },
    omittedText20(text) {
      // 21文字目以降は"…"
       return text.length > 20 ? text.slice(0, 20) + "…" : text;
    }
  },

とこのような実装で文字制御ができ指定箇所で3点リーダーにできます。
最後にdemoを残しておきます。

demo

See the Pen Nuxt.js / Vue.js version line clamp by miyawash (@miyawash) on CodePen.