Javascript:如何判断<span>是否超过2行？

Question

我显示了一些短跨度元素的气泡帮助。气泡在跨度下方居中，只要跨度不超过两条线，气泡看起来就很棒。

看起来不错：

tell <span>irregular: told, told</span>

看起来很糟糕：

tell <span>irregular: told,
told</span>

它看起来很糟糕，因为气泡不再位于跨度的中心。有没有什么方法可以用JavaScript或jQuery来判断这个跨度是否超过了两行？

Answer 1

9000的评论是正确的。诀窍在于可以访问您知道将在一行中呈现的<span>。您可以通过使用特定的id将块中的第一个单词包装在一个跨度中，也可以使用最后一个单词或其他一些单个单词；在某些情况下，单个单词会跨行，但是第一个单词应该是安全的。

一旦有了只在一行上的内容，就可以将其高度与将获得工具提示的<span>的高度进行比较。如果获得工具提示的<span>比单行<span>高，则它已换行为多行。

试试这个jsfiddle：

http://jsfiddle.net/ambiguous/JbMhZ/1/

调整右窗格的大小，直到红色文本换行，而绿色文本不换行。然后点击顶部工具栏中的Run，结果窗格底部应该会显示以下内容：

#has-break spans more than one line
#no-break spans only one line

我对这个技巧并不是很自豪，但它应该是有效的。

我想知道一个更好的工具提示定位算法是不是一个更好的主意。也许可以将鼠标坐标从悬停事件中拉出，并使用它来定位工具提示，而不是基于<span>来定位它。

Answer 2

我认为更好的方法是在CSS中使用white-space: nowrap：

CSS：

span.bubble {
    white-space: nowrap;
}

HTML：

tell <span class="bubble">irregular: told, told</span>

Answer 3

不管有没有换行符，你都可以在jQuery中使用.css()来计算跨度在屏幕上的确切位置，然后相应地定位工具提示。或者，您可以使用jQuery plugin为您完成所有这些工作。