基于宽度的CSS选择器？

Question

是否有一种CSS规则可以根据元素的宽度进行匹配？如果没有，那么提议在标准中提出这个想法是否有趣呢？

可以使用类似于code:max-width(200px) { white-space: nowrap; } 的方法来强制所有小代码标签换行。

我知道我可以使用一些js。

- Robert Vanden Eynde

---

你可以定义一个CSS类来包含你想要的特定样式，然后使用类名作为选择器。 - SPlatten

Answer 1

有没有一种CSS规则可以基于元素的宽度进行匹配？

没有。

如果没有，那么提出在标准中加入这个规则会有趣吗？

可能会有趣，但不是在选择器标准中，因为选择器并不打算与CSS的样式紧密耦合。

几年前曾有一些关于标准化所谓“元素查询”（element queries）的提案，但除了一些概念验证之外，它们似乎大多已经消失了。可能是因为它们无法以强健的方式进行规范和实现（循环依赖立即就会浮现出来）。

- BoltClock

---

对于第二个问题，我相信我们可以使用媒体查询来处理他所想要的。 - Temani Afif

@Temani Afif：https://dev59.com/questions/S2ct5IYBdhLWcg3wNq-v - BoltClock

我知道这个 :) 但我的意思是，如果我们知道我们开发的网站，我们就知道我们的元素在特定断点时会达到特定宽度，因此使用媒体查询我们可以处理这个问题... 当然，我不是在谈论元素是动态或交互式等复杂情况，因为在这种情况下我们涉及到JS，我们可以用JS来处理。 - Temani Afif

@Temani Afif：是的，如果您可以直接将元素的宽度与媒体查询相关联，那么没有人会阻止您使用媒体查询，但很明显，媒体查询并不是为解决这种问题而设计的（正如您在评论中提到的原因），我们不应该假装它们是。 - BoltClock

Answer 2

这可能会变得不一致，因为新元素可能会受到意外影响。我只会为您的html中的任何元素添加一个定义{wrap: nowrap;}的类。或者如果元素宽度在调整大小时发生变化，只需使用一些js即可。

window.onscroll = function(){
    var elementWidth = document.getElementById('elementID').style.width;
    if(elementWidth < 200){ .. do something .. }
    else{ .. reverse changes .. }
}

- williamsi

Answer 3

我刚刚看到了一个选择器内媒体查询的例子，实际上是相同的东西，虽然伪选择器会非常好用，很可能会取代媒体查询。我认为有一个新的伪选择器：aspect-ratio(4:3)，支持像：aspect-ratio(>4:3)这样的范围，将非常方便地根据元素的方向和宽高比来进行响应式元素的样式设置。

- Ted Fitzpatrick

Answer 4

使用CSS3不可能做到，但可以使用元素查询(Element Queries)。请查看此库：https://elementqueries.com

以下是一个示例：

@element code and (max-width: 200px) {
  :self {
    white-space: nowrap;
  }
}

- Nikita Seleckis