JavaScript：テキストが折り返すかどうかを検出する

Question

テキストが折り返すかどうかをどのように検出できますか？

大文字のヘッダーを持つUIがあるとします。私は、メニューバーに垂直に収まる最大のテキストをここでは欲しい。

LABEL: 9999 LABEL2: 99999 

数字の部分が大きくなることがあります。一部の画面（例：携帯電話 - それは要素がオーバーフローし、それが滞在するはずのバーの下にラップします。私はオーバーフローをしたくない：非表示。私はユーザーにすべてを見てもらいたい。

要素の大きさを何とか計算できるようにしたいのですが、プリエンプティブにフォントを縮小して、スペースを作るために要素を左に移動する可能性があります。

Answer 1

white-spaceのCSS処理をnowrapに設定すると、含まれている要素の幅とスクロール幅のさまざまな幅プロパティの違いを検出できます。

ここに示すのはjsFiddleです。

スクロールの幅が幅よりも広いことがわかったら、テキストのサイズを変更したり、テキストのサイズを変更したりする必要があります。

Answer 2

ニース@WooCaSh。ここにCoffeeScriptのアプリケーションがあります：

autoGrow = -> 
    (scope, element, attrs) -> 
    update = -> 
     if element[0].scrollWidth > element.outerWidth isBreaking = true else isBreaking = false 
     element.css 'height', 'auto' if isBreaking 
     height = element[0].scrollHeight 
     element.css 'height', height + 'px' if height > 0 
    scope.$watch attrs.ngModel, update 
    attrs.$set 'ngTrim', 'false' 

# Register 
App.Directives.directive 'autoGrow', autoGrow