当元素内容开始换行时触发CSS规则

如果浏览器宽度小于800px，我可以使用下面的CSS来实现

@media only screen and (max-width : 800px)
{
    #content
    {
        width: auto;
    }
}

如果某个特定元素的高度大于某个值，是否有办法使该元素出现CSS

我的目标是，如果一个元素的内容因为浏览器宽度太窄而开始换行，而不依赖于硬编码的最大宽度，那么就有一个特殊的CSS触发器

---

更具体的示例

<h2>Long title followed by <span class="subtitle">a subtitle</span></h2>


.subtitle
{
    margin-left: .7em;
    font-size: .6em;
}

@media only screen and (max-width : 600px)
{
    .subtitle
    {
        vertical-align: super;
        &:before
        {
            content: '\A';
            white-space: pre;
        }
    }
}

长标题后加字幕
字幕
{
左侧边缘：.7em；
字体大小：.6em；
}
@仅介质屏幕和（最大宽度：600px）
{
字幕
{
垂直对齐：超级；
&：之前
{
内容：'\A'；
空白：预处理；
}
}
}

---

我需要的是，如果将

.subtitle

换行到标题其余部分之外的另一行，那么它应该得到

垂直对齐：super

。当前，当浏览器收缩到某个宽度时，我会手动执行此操作，但问题是某些页眉比此长度长，我希望在页眉收缩时自动执行此操作，与浏览器宽度无关

不幸的是，媒体查询仅与屏幕大小（以及其他一些基于屏幕的属性）相关。您需要的是建议的“”行中的某些内容

这是CSS中的一个常见问题。一种解决方案是检测容器高度的变化（示例中的

）。它必须根据硬编码像素值进行检测，当大于该阈值时，切换一个类。

---

您还有一个额外的复杂性，即您所需的CSS更改将影响您正在测试的容器的高度，可能会创建一个测试和更改的循环。这是“元素查询”中最困难的挑战之一。

您是否可以尝试在所有正常情况下使用

max height

触发，以及在高度大于该

max height

时自动运行的另一条规则？如果该元素的宽度取决于（相对于）视口的宽度，我认为这是可能的。相关：@KingKing元素的宽度只取决于它的内容。很遗憾，你是在寻找纯CSS解决方案，还是可以接受一点JS？