11

如何检测一段文本是否会换行？

所以想象一下，我有一个带有较大文本标题的 UI。我想要这里最大的文本垂直适合菜单栏。它显示如下数值数据：

LABEL: 9999   LABEL2: 99999

数字部分可以变大。在某些屏幕上 - 例如手机 - 它会导致元素溢出并包裹在它应该留在的栏下方。我不想做溢出：隐藏。我希望用户看到整个事情。

我希望能够以某种方式计算元素的大小，如果它会预先包装缩小字体，可能会将元素向左移动以腾出空间。

4

2 回答 2

10

如果将white-spacecss 处理设置为 ，则可以检测包含元素宽度和滚动宽度的不同宽度属性之间的差异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>

一旦您知道滚动宽度比宽度宽，您就可以调整文本大小或执行您需要做的事情，直到它不是。

于 2013-05-24T22:43:36.793 回答
-1

不错@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
于 2015-01-16T19:08:22.393 回答