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/

調整右窗格的大小，直到紅色文本換行，但綠色文本不會。 然后點擊頂部工具欄中的“運行” ，它應該在“ 結果”窗格的底部說明：

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

我並不為這個黑客感到自豪，但它應該有效。

我想知道為你的工具提示更好的定位算法是否更好。 也許將鼠標坐標拉出懸停事件並使用它來定位工具提示，而不是根據<span>定位它。

Answer 2

我認為更好的方法是使用white-space: nowrap in CSS：

CSS：

span.bubble {
    white-space: nowrap;
}

HTML：

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

Answer 3

無論是否有換行符，你都可以在jQuery中使用.css()進行計算，其中屏幕上恰好位於該跨度位置，然后相應地定位工具提示。 或者您可以使用jQuery插件為您完成所有這些。

Answer 4

不太清楚你正在尋找什么級別的幫助，但是\\n是JS中的換行標識符