检测内联/浮动元素被推送到新行

Question

我目前想知道以下问题：例如我有一个带有SPAN标签的简单标题H1，我希望CSS根据SPAN元素的位置不同地设置样式，这意味着我需要检测是否span元素与H1标记的文本节点内容一致，或者被推送到新行，因为它不适合该行。

<h1>
  This is a header
  <span class="special">Special content</span>
</h1>

有没有人对此有好主意甚至解决方案？

Answer 1

的Javascript

如果元素包含或未包装，只需使用javascript添加/删除类。 JSFiddle

CSS

但如果你真的只想使用css，那么你可以试试这个有问题的解决方案：

使用::first-line伪元素设置标题的样式，然后将样式范围设置为h1的其余部分。问题是，如果它会在某个时刻换行，它也可以为你的标题设置样式。

＆＃13;

＆＃13;

h1::first-line {
    color: black;
}
h1 {
    color: red;
}

＆＃13;

<h1>
  This is a header
  <span class="special">Special content</span>
</h1>

＆＃13;

＆＃13;

＆＃13;

可悲的是，CSS没有任何复杂的线路管理机制。