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

Question

我为一些短跨度元素显示气泡帮助。气泡在该跨度下方居中，只要跨度不被两条线打破，气泡看起来就很棒。

看起来不错:

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

看起来很糟糕:

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

看起来很糟糕，因为气泡不再位于跨度下方的中心。是否有某种方法可以使用 JavaScript 或 jQuery 判断该跨度是否分为两行？

Answer 1

9000 的评论是正确的。诀窍是可以访问 <span>你知道的将在一行中呈现。您可以通过将 block 的第一个单词包装在具有特定 id 的范围内来做到这一点, 你也可以使用最后一个词或其他某个词;在某些情况下，单个单词会越线，但第一个单词应该是安全的。

一旦你有一些东西只在一行上，你可以将它的高度与 <span> 的高度进行比较这将得到工具提示。如果<span>即获取工具提示比单行高 <span>然后它已经换行到多行。

试试这个 jsfiddle:

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

调整右 Pane 的大小，直到红色文本换行但绿色文本不换行。然后点击顶部工具栏中的运行，它应该会在结果 Pane 的底部显示:

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

我并不为这个 hack 感到骄傲，但它应该有用。

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