Hide whitespace-only text nodes

CSS
1

There should be a way to hide whitespace nodes. This is an existing behavior in display modes like Flexbox, but there’s no way to do it in inline positioning.

I propose a property / value like white-space: cull, which would hide any whitespace-only text nodes between children in inline display.

Autoprefixer could convert this rule to something like > :-moz-whitespace-only {font-size: 0}. (This is potentially a little leaky without a selector for only text nodes, but that’s a problem for another thread.)

The simplest use case for this would be a major site, with a lot of legacy CSS architecture based around inline-block, that is currently spending a lot of processing on a step that rewrites content to remove all whitespace between nodes (a behavior I know I’ve seen on sites like the Docker Hub).

This would also be potentially useful for polyfilling future Flexbox-like display modes (like maybe Grid).

2 Likes
2

I think this idea makes sense.

3

This is what the ‘text-space-collapse’ property currently defined in Text 4 https://drafts.csswg.org/css-text-4/#white-space-collapsing is for.

1 Like
4

That looks good- the one criticism I would have is I don’t think it should be inherited. (If I have a row of three inline-block paragraphs, I don’t want those paragraphs losing all their spaces just because I want the spaces between the paragraphs discarded.)