CSS：如何在一種情況下將元素內聯，但在另一種情況下是表格單元格？

Question

TL; DR：我正在尋找一種顯示SPAN元素的方法，可以在下面的第1張和第3張圖片中顯示所需的行爲。

交互式代碼：http://jsfiddle.net/53GZe/1/

當選擇從一個文本塊文本時，顯示需要是內聯的，以便不產生斷裂。

---

---

現在，當我嘗試選擇具有相同顯示多個元素：內聯：我得到這個：

---

---

因爲顯示設置爲內聯，所以它不知道多寬以使<span>（在選擇周圍插入的元素賦予自定義突出顯示效果）

因此，對於其他情況，當我將顯示設置爲表胰島β細胞，我得到這個行爲：

---

---

這是美好的，和一種整齊。除此之外，它不與文本的內聯塊像我的第一個工作，例如：

---

---

（注意前後選擇休息）

Answer 1

莫非您使用jQuery來搜索突出顯示的div的子項。然後，如果有任何阻塞的元素或換行符，請將display屬性設置爲表格單元格。

或者通過爲情況設置新的CSS規則，也許再次，通過使用jQuery來檢查內部元素？

.situation1 .highlighted { display:table-cell; } 
.situation2 .highlighted { display:inline; }