CSS:如何让元素在一种情况下内联，但在另一种情况下成为表格单元格？

Question

TL; DR:我正在寻找一种显示 SPAN 元素的方法，该元素可以实现下面第一张和第三张图片中显示的所需行为。

互动代码:http://jsfiddle.net/53GZe/1/

从文本 block 中选择文本时，显示需要内联，这样就不会产生中断。

---

---

现在，当我尝试选择具有相同显示的多个元素时:内联:我明白了:

---

---

因为显示设置为内联显示，所以它不知道将 <span> 设为多宽(在选择周围插入的元素以提供自定义突出显示效果)

因此，对于另一种情况，当我将显示设置为表格单元格时，我得到了这种行为:

---

---

太棒了，有点整洁。除此之外，它不适用于我的第一个示例中的内联文本 block :

---

---

(注意选择前后的间隔)

Answer 1

您可以使用 jQuery 来搜索突出显示的 div 的子项吗？然后，如果有任何被阻止的元素或换行符，请将 display 属性设置为 table-cell。

或者通过为这种情况设置新的 CSS 规则，也许再次使用 jQuery 检查内部元素？

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