CSS selector based on width?

问题:

Is there a CSS rule that would match elements based on their width? If not, would it be interesting to propose that in the standard?

One could do something like code:max-width(200px) { white-space: nowrap; } to have all small code tag force line break.

I know I could use some js.

回答1:

Is there a CSS rule that would match elements based on their width?

No.

If not, would it be interesting to propose that in the standard?

Maybe, but not the Selectors standard, because Selectors is not intended to be tightly coupled with the styling aspect of CSS.

There were proposals to standardize something called "element queries" a few years ago, but other than a few proofs-of-concept, they seem to have mostly dissipated. Probably because they're just not feasible to spec and implement in a way that is robust (cyclic dependencies immediately come to mind).

回答2:

That might become inconsistent because new elements could be unexpectedly affected. I would just add a class that defines {wrap: nowrap;} to any elements in your html. Or if the element width changes on resize, just use some js.

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

回答3:

It is not possible to do it using CSS3, but you can use Element Queries. Check this library: https://elementqueries.com

Here is an example:

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