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

Javascript：检测文本是否会换行

2 个答案: