html - Force single line of text in element to fill width with CSS

Question

I have a div element that holds one line of text. How can I get this text to fill the width 100%?

text-align:justify is only working on elements with several lines of text, and has no effect on the div with single line. Manually adjusting the letter-spacing and word-spacing is ugly and ineffective.

Are there any other alternatives?

Answer 1

Try this:

div {
  text-align: justify;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

jsFiddle

Take a look here for more info.