我为一些短跨度元素显示了气泡帮助。气泡位于该跨度下方的中心,只要跨度不被打破成两条线,气泡看起来就很棒。
看起来不错:
tell <span>irregular: told, told</span>
看起来很糟糕:
tell <span>irregular: told,
told</span>
它看起来很糟糕,因为气泡不再位于跨度下方的中心。有没有办法使用 JavaScript 或 jQuery 来判断该跨度是否分为两行?
9000的评论是正确的。诀窍是能够访问<span>
您知道将在一行上呈现。您可以通过使用特定的跨度将块的第一个单词包装在跨度中来做到这一点id
,您也可以使用最后一个单词或其他一些单词;有时单个单词会跨线,但第一个单词应该是安全的。
一旦你有了只在一条线上的东西,你就可以将它的高度与另一条线的高度进行比较<span>
这将获得工具提示。如果<span>
就是让工具提示比单行高<span>
然后它已经换行为多行。
试试这个jsfiddle:
http://jsfiddle.net/ambigously/JbMhZ/1/ http://jsfiddle.net/ambiguous/JbMhZ/1/
调整右侧窗格的大小,直到红色文本换行但绿色文本不换行。然后打Run在顶部的工具栏中,它应该在底部显示Result pane:
#has-break spans more than one line
#no-break spans only one line
我并不为这个黑客感到自豪,但它应该有效。
我想知道为您的工具提示提供更好的定位算法是否是一个更好的主意。也许将鼠标坐标从悬停事件中拉出,并使用它来定位工具提示,而不是根据<span>
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)