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

【问题标题】：Detect inline/floated element being pushed to new line检测被推送到新行的内联/浮动元素
【发布时间】：2016-05-13 17:51:34
【问题描述】：

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

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

有没有人有一个好主意，甚至解决这个问题？

【问题讨论】：

在 css 文件中添加这一行 h1 span{ your styles }
所以如果我没有误会你，你的意思是要检测 span 何时换行？
为什么要设置不同的样式？你能更好地告诉我们你想要达到的效果吗？
谢谢，但我需要设置 h1 span {} 的样式，具体取决于跨度是否被推到新行。例如如果我们有一个伪选择器 h1 span:newline 我可以为 h1 span {} 和 h1 span:newline {} 设置不同的样式
我想以不同的方式设置跨度，因为例如如果它与 h1 文本内容放在一行中，我将其显示为具有较小字体大小和左边距的标签，以将其与文本分开。如果跨度被推到新行，我想给它一个上边距，没有左边距，也许还有另一个字体大小；）它很棘手

【解决方案1】：

Javascript

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

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

使用::first-line 伪元素来设置header 的样式，然后将 span 设置为h1 的其余部分。问题是，如果它会在某些时候换行，它也可以设置您的标题样式。

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

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

遗憾的是，CSS 没有任何复杂的线条管理机制。

【讨论】：