テキストの折り返し位置を取得したい

Question

<div>で囲ったテキストをcssで位置を指定して表示しているのですが 画面の端にテキストが近づくと自動で折り返して改行されて表示されると思うのですが(画像参照)、 その改行位置（何文字目の後ろor前で折り返している）を取得する方法が探し出せずにいます。 ご存知の方いらっしゃいましたら教えていただけないでしょうか。 javascriptでも手法は何でも構いません。

よろしくお願い致します。

    <div class="caption">
      <p>あああああいいいいいううううう</p>
    </div>

Answer 1

Rangeで1文字ずつ選択してgetBoundingClientRect()を求めることで可能かと思います。

const text = document.querySelector('.caption p').firstChild;
let previousRect = null;
for (let i = 0; i < text.data.length; ++i) {
  const range = document.createRange();
  range.setStart(text, i);
  range.setEnd(text, i + 1);
  const rect = range.getBoundingClientRect();
  // rect.y が1文字前のものと異なるなら改行されているかも
  if (previousRect && previousRect.y < rect.y) {
    ...
  }
  previousRect = rect;
}

Comments

[ssyk]

ご回答ありがとうございます！ご教示いただいた内容で実装してみましたがrange.getBoundingClientRect()で取得したrectのすべてのパラメータがどんな文字に対しても0になってしまう事象に遭遇しており、こちら調査中です。また改めて報告させていただきます！

[int32_t]

ページ上に表示されていないとそんな感じになると思います。

[ssyk]

angularで実装しており、if文で表示非表示をしているのですが、文字自体は取得できており位置情報だけがすべて常に０になっております。

[ssyk]

折り返し位置算出用にダミー要素を用意（ユーザーに見えないようにz-indexにマイナスを設定）してそこに文字列を反映することでif文制御を組み込んだ状態で無事に算出することができました！本当にありがとうございました！！