Justify Last Line in Paragraph – CSS Hack

The specs for CSS3 include all sorts of great options for justifying text, but those of us with non-CSS3 browsers are left out. One quick hack for justifying the last line in a paragraph is to add a series of underscores (or any other character) to the end of the paragraph block, and color them white.

A regular “text-align: justify;” styled paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim nunc. Duis et magna eu metus faucibus mollis luctus vel nibh. Nulla condimentum est felis. Maecenas laoreet ipsum euismod metus tristique imperdiet. Nunc congue, libero eu scelerisque fringilla, nunc ante lobortis massa, rhoncus feugiat lectus nisi at lectus.

However, if you add to the end of the paragraph:

  1. <font color="#fff">______________________</font>

You get:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dignissim nunc. Duis et magna eu metus faucibus mollis luctus vel nibh. Nulla condimentum est felis. Maecenas laoreet ipsum euismod metus tristique imperdiet. Nunc congue, libero eu scelerisque fringilla, nunc ante lobortis massa, rhoncus feugiat lectus nisi at lectus. ______________________

This could be done within a stylesheet, too… I’m just lazy.

2 Comments

  1. Thank you !

    I’ve been searching what feels like days (OK an hour – that’s days in internet time)

    Most forums go something like this …

    Hello kind people, could you help me justify the last line of text please in a non condescending manner?

    uuurrrrrrnnananannannananannaannan dont justify because i know every thing about design the internet and your project so dont !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! nonononononoonn

    so thanks for the hack! :^)

  2. Thanks. Its works….

Leave a Comment