Javascript:检测文本是否换行

Question

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

假设我有一个 UI，其 header 的文本较大。我想要最大的文本垂直放置在菜单栏中。它像这样显示数字数据:

LABEL: 9999   LABEL2: 99999

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

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

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>

一旦您知道滚动宽度大于宽度，您就可以调整文本大小或执行您需要执行的操作，直到它不再显示为止。