Search code examples
htmlcsstext

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

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?

Solution

  • Try this:

    div {
  text-align: justify;
}

div::after {
  content: "";
  display: inline-block;
  width: 100%;
}
    <div>
  Some sample testing string
</div>

    jsFiddle

    Take a look here for more info.