Is there a valid way to force a white space between list items when HTML is minified?

Question

I am trying to make use of text-align: justify; to space the list items out. (LIKE THIS)

The problem is that my HTML is minified - which removes the spaces between the list items and ruins the text-align: justify; effect (LIKE THIS)

So usually I get around this problem by adding an   char between elements - ensuring that my whitespace is preserved.

Now although this actually works for list items too (LIKE THIS - (the last demo there)) the problem here is that adding   between list items is invalid HTML -

I tried the html validator - and I got this error:

One more thing: I can't use display:flex; with justify-content : space-between; because I need to suppport IE9

Any ideas?

Answer 1

You can add a space after each list item as generated content, but then the list items need to be laid out as inline elements, not as inline blocks, in order to make the spaces matter in justification:

.nav li {
    display: inline;
}
.nav li:after {
    content: " "; /* a regular space */
}
.nav li a {
    display: inline-block;
}

The last rule above handles the issue that a link may contain spaces and you probably do not want them to be stretched (as they would be if the element were inline).

Original answer, written before learning the difference between inline and inline block elements in justification; retained here for reference:

No, if you have “minified” HTML code so that whitespace between elements has been removed, you cannot make the elements act as “words” in justification. Such “minification” generally changes the actual content and should not be done—it is OK to collapse inter-element whitespace to one whitespace character, but not more.

The reason is that justification algorithms recognize only whitespace in actual content. Thus, it would not help to add spaces as generated content.

So you should use a more adequate minifier, or perhaps use the settings of the one you are using, so that it does not remove inter-element whitespace.