Justify a single line with CSS

Note: As it turns out, the technique described here is pretty useless. Nearly no browser supports text-justify and when it does it's not certain the text will be spread across the full width of the block. And that isn't considered a bug.

For a site I'm working on I want to create a layout with two lines of text that have the same width, something like this:

To justifiy a single line of text with CSS text-align together with text-justify doesn't work. Look at this example:

<p style="background-color  : #369;
          color             : #fff;
          text-align        : justify;
          text-justify      : inter-character;
          width             : 20ch">
     Some text
</p>

Result:

Some text

The text is justified to the right and not spread across the complete box. The reason is that text-align does not apply to the last line. If there is only one line, it also is the last, so the property does not apply.

Justification for the last line is set with the text-align-last property:

<p style="background-color  : #369;
          color             : #fff;
          text-align-last   : justify;
          text-justify      : inter-character;
          width             : 20ch">
     Some text
</p>

Result:

Some text

The type of justification is determined by text-justify, but that also sets the justification of the other lines in the text. So you can change the alignment of the last line, but not the type of justification.

In case where there is only one line, which is what I needed, this is not a problem. And using different types of justification probably does not provide a very consistent layout.