
css で長い文章を省略するときに `text-overflow: ellipsis` を使用して省略部分に「…」（三点リーダー）などを表示することができます。

省略されているときのみツールチップで全文が表示されるようにしたいといった場合に、JavaScript で `text-overflow: ellipsis` が適用されているかどうかを判定する必要があります。

1行の場合は [HTML text-overflow ellipsis detection](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection#answers) の回答にある方法で実現できますが、テキストが複数行になる場合は少し変更が必要です。

作成済みのデモはこちらです。ソースコードの全体はこちらでご確認ください。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/BaxQgEM)

## html を用意する

中にテキストを持つカードが並ぶレイアウトです。  
テキストは2行以下と3行（省略あり・なし）の3種類を用意しました。

```html
<div class="card-list">
  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間</p>
  </div>

  <div class="block">
    <p class="text">
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、
    </p>
  </div>

  <div class="block">
    <p class="text">
      この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文
    </p>
  </div>
</div>
```

## css でテキストが指定より長い場合は省略する

1行のみで省略する場合は以下の指定で省略できます。

```css
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
```

複数行の場合は以下のように指定します（ `-webkit-line-clamp` の数字が行数になります）。

```css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
```

## JavaScript で text-overflow: ellipsis が適用されているか判定する

`text-overflow: ellipsis` が適用されるのは、要素の中身が指定よりも大きい場合です。  
要素の中身（テキスト全体）が、要素を表示する領域（cssで指定した3行分の高さ）よりも大きい場合は `true` を返すようにします。

要素の中身の高さを `Element.scrollHeight` 、要素を表示する領域の高さを `Element.offsetHeight` でそれぞれ取得して比較します。

テキスト要素を受け取り、 `text-overflow: ellipsis` が適用されているかを判定して `true` か `false` を返す関数を作成します。

```jsx
const isEllipsisActive = (el) => {
  return el.offsetHeight < el.scrollHeight;
};
```

この関数をテキスト要素（サンプルの `.text` ）をひとつずつ渡して実行します。

```jsx
const elements = document.querySelectorAll(".text");

elements.forEach((el) => isEllipsisActive(el));
```

## text-overflow: ellipsis が適用されている場合はツールチップを表示する

ツールチップは `HTMLElement.title` を使用します。 html 要素に `title="このテキストがツールチップとして表示されます。"` のように指定します。

> 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。  
> ー [HTMLElement.title - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title)より引用

先ほどの関数で `true` が返る場合のみ、html に title 要素を追加します。

```jsx
elements.forEach((el) => {
  if (isEllipsisActive(el)) {
    // テキスト全文を取得
    const text = el.textContent;
    // テキスト全文を title と共に追加
    el.setAttribute("title", text);
  }
});
```

## デモ

デモでは `text-overflow: ellipsis` の判定の関数の結果を Console に書き出すようにしているので、Console を開いて正しく判定されているか確認してみてください。

[CodePen で「テキスト省略時の text-overflow: ellipsis の適用を判定する方法（複数行）」のデモを見る](https://codepen.io/chocolat5/pen/BaxQgEM)

## 参照

- javascript - HTML text-overflow ellipsis detection - Stack Overflow [https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343)（2022-9-15参照）
- Element.scrollHeight - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight) （2022-9-15参照）
- HTMLElement.offsetHeight - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight) （2022-9-15参照）
- HTMLElement.title - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title) （2022-9-15参照）


テキスト省略時の text-overflow: ellipsis の適用を判定する方法（複数行）

Tags