30

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?

Jones Joseph
  • 4,236
  • 2
  • 20
  • 39
Alix Përry
  • 399
  • 2
  • 6
  • 14
  • 1
    The conventional way to solve this is to use an `:after` pseudo element to generate enough content to make the content flow onto a second line, then tinker with font-size, line-height, height, and overflow to hide the extra vertical space that this causes. – Alohci Jan 18 '14 at 01:55

1 Answers1

48

Try this:

div {
  text-align: justify;
}

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

jsFiddle

Take a look here for more info.

mutil
  • 3,025
  • 1
  • 24
  • 33
  • 2
    Using that trick to justify a oneliner title, I had to force the height of my element to prevent it for adding a new empty line under my title. – svassr Oct 21 '14 at 23:38
  • @svassr or you can also add a ::before pseudo element and then just tweak the line-height on the parent element, this way the text being always centered between the two pseudo elements. All in all, nice solution @mutil! – Nicolae Olariu Feb 06 '15 at 10:53