3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Organization

[truncate]文字列が省略されているかをチェックする[JavaScript]

背景

文字列が長い時に、3点リーダーで省略したいというケースは結構あると思います。
その際に、css(text-overflow: ellipsis)で対応することもあるあるかなと(思っています。)

もし文字列が省略されたときに追加で処理を加えたいという場合はどうするかというのが今回のテーマです。

結論

scrollWidthとoffsetWidthを使います

以下、解説

前提

こんなvueファイルがあったとします

<template>
  <div class="long-text">{{ longText }}</div>
</template>

<script>
export default {

  data() {
    return {
      longText:
        'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんぁあぃいぅうぇえぉおかがきぎくぐけ'
    }
  }
}
</script>

<style>
.long-text {
  width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background-color: pink;
}
</style>

こんな感じで表示されます(しっかり3点リーダーで省略されています)
スクリーンショット 2020-06-06 11.05.03.png

以下、文字列が省略されているかを確認するために試して、失敗例と成功例を記載します

失敗例 DOMを取得して、実際の文字列(dataプロパティ)とDOM上の文字列の長さを比べたらいいのでは?

下のように$refsでDOMを取得してみました


<template>
  <!-- refを追加 -->
  <div ref="text" class="long-text">{{ longText }}</div>
</template>

<script>
export default {
  mounted() {
    // $refsでDOMを取得する
    console.log('this.$refs.text', this.$refs.text)
  },
  data() {
    return {
      longText:
        'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんぁあぃいぅうぇえぉおかがきぎくぐけ'
    }
  }
}
</script>

まんま表示されてました。。。
lengthを使って文字列の長さを比べる方法では無理だなと判断しました。
スクリーンショット 2020-06-06 11.12.21.png

成功例 lengthではなくoffsetWidthとscrollWidthを使う

$refsを使うところは変わらず、consoleでoffsetWidthとscrollWidthを確認してみます

console.log('offsetWidth', this.$refs.text.offsetWidth)
console.log('scrollWidth', this.$refs.text.scrollWidth)

consoleで表示された値

スクリーンショット 2020-06-06 11.15.07.png

offsetWidthが表示されている幅で、scrollWidthが省略される前の実際の幅です
この値が合わないということは省略されていると判断していいと思います

まとめ

省略されているときに何か追加処理することは結構あると思います。
省略される前の全文をポップアップで表示したいとか、prefixをつけたいとかとか
そんな時はぜひお試しくださいまし

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
3
Help us understand the problem. What are the problem?