Javascript：如何判断< span>打破2线？ [英] Javascript: how can I tell if a <span> is broken over 2 lines?
问题描述
我为一些短跨度元素显示泡泡帮助。
看起来不错：
告诉< span>不规则：告诉，告诉< / span>
看起来很糟糕：
告诉< span>不规则：告诉，
告诉< / span>
看起来很糟糕，因为泡沫不再位于跨度下方。有没有什么方法可以用JavaScript或jQuery来说明，如果这个跨度被分成两行？ 解决方案
9000的评论是正确的。诀窍是有权访问您知道将在一行中呈现的< span> 。你可以通过用特定的 id 来包围你的块的第一个单词，你也可以使用最后一个单词或其他单个单词;有些情况下，一个单词会跨越线条，但第一个单词应该是安全的。
一旦你只有一行的东西你可以比较它的高度和< span> 的高度将会得到工具提示。如果获得工具提示的< span> 高于单行< span> ，那么它已包装成多行。
试试这个jsfiddle：
http://jsfiddle.net/ambiguous/JbMhZ/1/
调整右窗格的大小，直到红色文字换行，但绿色文字没有换行。然后点击顶部工具栏中的运行，它应该在结果窗格的底部显示：
＃has-break跨越多行
＃no-break跨越一行
我并不为此黑客感到自豪，但应该可以工作。
我还在想，是否有更好的定位算法你的工具提示将是一个更好的主意。也许将鼠标坐标从悬停事件中拉出来，并使用它来定位工具提示，而不是根据< span> 定位。
I display a bubble help for some short span elements. The bubbles are centered below that span and look great as long as the span isn't broken over two lines.
Looks good:
tell <span>irregular: told, told</span>
Looks bad:
tell <span>irregular: told,
told</span>
It looks bad, because the bubble isn't centered under the span anymore. Is there some way using JavaScript or jQuery to tell, if that span is broken over two lines?
9000's comment is correct. The trick is having access to a <span> that you know will be rendered on a single line. You can do that by wrapping the first word of your block in a span with a specific id, you could also use the last word or some other single word; there are cases where a single word will cross lines but the first word should be safe.
Once you have something that is only on one line you can compare its height to the height of the <span> that will get the tooltip. If the <span> that is getting the tooltip is taller than the single-line <span> then it has wrapped to multiple lines.
Try this jsfiddle:
Adjust the size of the right panes until the red text wraps but the green text doesn't. Then hit Run in the toolbar at the top and it should say this at the bottom of the Result pane:
#has-break spans more than one line
#no-break spans only one line
I'm not exactly proud of this hack but it should work.
I'm left wondering if a better positioning algorithm for your tooltip would be a better idea. Maybe pull the mouse coordinates out of the hover event and use that to position the tooltip rather than positioning it based on the <span>.
这篇关于Javascript：如何判断< span>打破2线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
