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; }