Javascript：檢測文本是否會換行

Question

如何檢測一段文字是否會換行？

所以想象一下，我有一個帶有標題的UI，文字很大。 我希望這里最大的文字在菜單欄中垂直放置。 它顯示如下數值數據：

LABEL: 9999   LABEL2: 99999

數字部分可以變大。 在某些屏幕上 - 例如手機 - 它會導致元素溢出並包裹在應該保留的條形下方。我不想做溢出：隱藏。 我希望用戶看到整件事。

我希望能夠以某種方式計算元素的大小，以及它是否會先切換縮小字體，可能會移動元素以留出空間。

Answer 1

如果將white-space css處理設置為nowrap可以檢測包含元素的寬度和滾動寬度的不同寬度屬性之間的差異。

這是一個演示的jsFiddle ，以及代碼：

 $(document).ready(function(){ $("#messages").append($("#aa").width() + " " + $("#aa").outerWidth() + " " + $("#aa")[0].scrollWidth); }); 

 #aa { white-space: nowrap; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <div id="aa">lksjdlakj dla ldakjl skajd lkasjlkdas dlaskdjl aksjd laksdj laks djlkas dlkasjd lkasjdl alkdj laksdj alsklkajlksjad lkajsld kasjldkasjd lkjlsk djlkasdj llaskjdl aksdjlaksjd lkasjdlak sdl</div> <div id="messages"></div> 

一旦您知道滾動寬度比寬度寬，您就可以調整文本大小或執行您需要執行的操作，直到不是。

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