iGE*_*GEL 22 html javascript jquery
我为一些短跨度元素显示了气泡帮助.只要跨度不超过两条线,气泡就会在该跨度下方居中并且看起来很棒.
看起来不错:
tell <span>irregular: told, told</span>
看起来不好
tell <span>irregular: told,
told</span>
它看起来很糟糕,因为气泡不再位于跨度的中心.有没有办法使用JavaScript或jQuery来判断,如果跨越两行？
mu *_*ort 23
9000的评论是正确的.诀窍是可以访问<span>您知道将在一行上呈现的内容.您可以通过将块中的第一个单词包含在具有特定内容的范围中来执行此操作id,也可以使用最后一个单词或其他单个单词; 有些情况下,单个单词会交叉,但第一个单词应该是安全的.
一旦你有一个只在一行上的东西,你可以比较它的高度与<span>得到工具提示的高度.如果<span>获得工具提示的内容高于单行,<span>那么它已经包装到多行.
试试这个jsfiddle:
调整右窗格的大小,直到红色文本换行,但绿色文本不会.然后点击顶部工具栏中的"运行",它应该在" 结果"窗格的底部说明:
#has-break spans more than one line
#no-break spans only one line
我并不为这个黑客感到自豪,但它应该有效.
我想知道为你的工具提示更好的定位算法是否更好.也许将鼠标坐标拉出悬停事件并使用它来定位工具提示而不是根据它定位它<span>.