66318


**下記のようなdivに任意のテキストを表示する際、(画面幅等により、)折り返しが発生するかどうかを事前に判定する方法はありますか？**  
対象divの横幅は指定しない。左右のmarginのみ指定

[code]

    <div style="margin:0:15px;">ここに長さが異なるテキストを表示する<div>
    
[/code]


CC BY-SA 4.0
2020-05-04T02:03:48.343
66265
2020-05-05T08:26:33.440
2020-05-04T02:36:01.573
32986
7886
question
javascript
htmlでテキスト表示する際、(画面幅等により、)折り返しが発生するかどうかを事前に判定する方法はありますか？


インラン要素やテキストノードに `getClientRects` を使うと一行ごとのDOMRectが得られます。  
折り返しがある場合には戻り値が2つ以上になるのでそれで判断できます。

[code]

    function hasLineBreak(textNode) {
      let range = new Range()
      range.selectNode(textNode)
      return range.getClientRects().length > 1
    }
    
    document.querySelectorAll("div").forEach(el => {
      let ret = hasLineBreak(el.firstChild)
      console.log(ret, el.firstChild.textContent)
    })
[/code]

[code]

    <div style="margin:0:15px;">ここに長さが異なるテキストを表示する</div>
    
    <br>
    
    <div style="margin:0:15px;">ここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示する</div>
[/code]

[code]

    <div style="margin:0:15px;">ここに長さが異なるテキストを表示する</div>
    
    <br>
    
    <div style="margin:0:15px;">ここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示するここに長さが異なるテキストを表示する</div>
    
[/code]

[code]

    function hasLineBreak(textNode) {
      let range = new Range()
      range.selectNode(textNode)
      return range.getClientRects().length > 1
    }
    
    document.querySelectorAll("div").forEach(el => {
      let ret = hasLineBreak(el.firstChild)
      console.log(ret, el.firstChild.textContent)
    })
    
[/code]

今回はテキストノードをel.firstChildで取得しましたが、実際にはidつきのspanで囲むと良いと思います。


CC BY-SA 4.0
2020-05-05T07:54:47.573
66318
2020-05-05T08:26:33.440
2020-05-05T08:26:33.440
32986
39930
66265
answer