文字が折り返され何行になってることを調べることは可能ですか？

Question

前提・実現したいこと

divのwidthを100pxにして文字が折り返された時に何行になってるか行数を得たいです
どうやって計算したらいいかご存知の方教えていただけないでしょうか？

該当のソースコード

<div id="a" style="overflow-warp:break-word;width:100px;height:300px;background:red">
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div>

<input type="button" value="行数チェック" onclick="alert(a.length)">

Comments

[int32_t]

行の高さは一定である、という前提は成り立ちますか?

[m.ts10806]

それをしたい目的にもよるように思います。

Answer 1

1. 行数カウンタを1で初期化する
2. 対象のdivにcontenteditable=trueを付ける
3. getSelection() の API で、対象divの最初にキャレットを置く
4. Range.getBoundingClientRect() で入手できるキャレットの位置を記録する
5. getSelection().modify('move', 'forward', 'line') でキャレットを1行下に移動する
6. またキャレットの位置を取得して、記録したものと一致してなければ行数カウンタを増やして5に戻る
7. 対象のdivのcontenteditable=trueを外す

行の高さが一定とか、LTR限定とか、要素を足してもよいとか制約が増えるともっと簡単な方法でできるかと思います。

Answer 2

https://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i

Answer 3

計算用のdivを作成し、文字を減らしながら計算用のdivの高さが変化する回数を取得します。
計算用のdivについては、

• 見えない場所に配置する
• オリジナルのdivと同じスタイル（特に幅、パディング、文字サイズ、行高さ）を持つようにする
• 計算が終わったら削除する

という部分に気をつけると良いと思います。

<div id="a" style="overflow-wrap: break-word; width: 100px; height: 300px; background: red">
あああああああああああああああ...
</div>

<input type="button" value="行数チェック" onclick="javascript: calc();">

<script>
function calc() {
  const container = document.querySelector("#a");
  const shadowContainer = container.cloneNode(true);

  shadowContainer.style.height = "auto";
  shadowContainer.style.maxHeight = "none";
  shadowContainer.style.position = "fixed";
  shadowContainer.style.left = "100vw";

  document.body.appendChild(shadowContainer);

  let currentHeight = 0;
  let rows = 0;

  while (shadowContainer.textContent.length > 0) {
    const rect = shadowContainer.getBoundingClientRect();

    if (rect.height === 0) {
      break;
    }

    if (currentHeight !== rect.height) {
      rows += 1;

      currentHeight = rect.height;
    }

    shadowContainer.textContent = shadowContainer.textContent.substr(0, shadowContainer.textContent.length - 1);
  }

  shadowContainer.remove();

  alert(rows);
}
</script>