CSS – One Line Justify

I came across a CSS problem, text-align: justify does not work with only one line.

Justify behavior

The reason is because it has been designed with paragraphs in mind. It justifies all the lines but the last one.

Normal Justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris.

Full Justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat laboris.

Solution

The solution (given by cam) is to put an extra tag at the end of the paragraph that will be big enough to create a new line. Fortunately, it is possible to do it without affecting the markup using :after. We are going to put an empty tag as big as the line.

.fulljustify {
  text-align: justify;
}
.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

Now you can add class="fulljustify" in order to justify your one-line divs πŸ™‚

This is a one-liner. Please justify!
If you liked this article, you might be interested in my Twitter feed as well.
 
  • Anonymous

    Great tip, thanks for sharing πŸ™‚ Had me stumped for a while trying to figure a solution out for this!

  • Pingback: I cant justify single line text using CSS in asp.net | PHP Developer Resource()

  • Bob

    Hey Christopher, great tip and well explained. I appreciate it!

  • http://hescoding.com/ Jason Morita

    Quick note, this conflicts with the HTML5 Boilerplate .clearfix class. Just FYI incase it doesn't work using that class.

  • Dave

    Beautiful. But does the :before and :after pseudo class work with IE7 out of the box?

  • Pingback: Vjeux » CSS – Displaying a Justified Line of Text()

  • johnDoe
  • johnDoe

    in fact, in a minimal example, it does NOT work with HTML5 (creates an additional line) but with XHTML1.0 (watch your doctype)

  • parag

    how to use tag in justify text without loosing justify text

  • parag

    How to use br tag in justify text without loosing justification text behaviour

  • http://blog.vjeux.com/ Vjeux

    Check out this whole article about it. There's no one good solution: http://blog.vjeux.com/2012/css/css-displaying-a-justified-line-of-text.html

  • beygi

    just cool

  • Pingback: One line text justify without a gap beneathCopyQuery CopyQuery | Question & Answer Tool for your Technical Queries,CopyQuery, ejjuit, query, copyquery, copyquery.com, android doubt, ios question, sql query, sqlite query, nodejsquery, dns query, update()

  • svassr

    Using that trick to justify a one-liner title, I had to force the height of my element to prevent it for adding a new empty line under my title.

  • wenze

    i found a problem,when doctype is html5,".fulljustify:after" will generate a blank line.
    please how to fix it.

  • CJ Dennis

    Quick and dirty fix for issue of HTML5 adding an extra line: add "position: absolute;" to the :after class!

  • CJ Dennis

    OK, that didn't work as I expected! I added "line-height: 60%;" to the main class instead! It's nowhere near perfect as it clobbers some default styles but it does do the trick!

  • http://hayatbiralem.com/ Γ–mΓΌr YanΔ±koğlu

    Nice, thanks πŸ™‚

  • Carlitos Gutierrez Orrego

    fix for extra line, add css to the class .fulljustify margin-bottom:-1.1em; (I checked using bootstrap and html5) πŸ˜‰

  • Carlitos Gutierrez Orrego

    add css to the class .fulljustify margin-bottom:-1.1em; (I checked using bootstrap3.3.5)

  • Pierre

    Well, after hitting the "what the heck is that margin below the inline-block that I can't get rid of!!??"-bug, I found myself here. The hack with setting a negative margin-bottom worked somewhat, but it's not right.. this hack messed up some things as well so I kept digging. Here're my 2 cents: Remove the frickin' tag at the top! Turns out this will, when it's configured that way, force the browser to use HTML4 rules, and here's where the margin bug happen. If you remove it altogether, it just starts working like expected, that is: no mysterious margin at the bottom. πŸ™‚

    I believe you would be able to change the doctype to html5 using perhaps, but I haven't tested it and neither shall I.. I don't ever want to see that DOCTYPE tag again πŸ™‚

  • Pierre

    oh, disqus won't allow me to type in tags.. ok, well. Remove the [left-tag]!DOCTYPE whatever[right-tag] to make the ugly bottom margin to go away. With [left-tag] and [right-tag], I actually mean html-tag characters..

  • robocat

    To fix the "margin below the inline-block that I can't get rid of!!??"-bug, try setting the font-size to 0.1px; on the :after block.

 

Related Posts

  • June 8, 2012 CSS – Absolute position taking into account padding (6)
    When looking at the code of Lightbox.com I remarked that they are not using top and left in order to position their images but margin-top and margin-left. I've been wondering why for some time and finally found the reason. It is a way to position absolutely elements in a container and […]
  • September 17, 2011 WoW Interface Anchor Positioning (5)
    I've always found CSS positioning with both float and position: absolute/relative hard to work with. I want to introduce to you an alternative way borrowed from the World of Warcraft Interface: Anchors. Anchor The concept is extremely simple. You can tell where you want the element […]
  • July 4, 2012 CSS – Vertical Height of Smileys (1)
    There's one big issue when displaying images inline like smileys is to position them at the right height. Using vertical-align pre-sets Usually what you do is try to use vertical-align and test all the possibilities. Then you are frustrated because you can't find the one that is […]
  • July 26, 2012 CSS – Cross Browser Drag Cursor (4)
    grab and grabbing are two great CSS cursors you can use when you are moving things around. Windows: Mac: Since those are not standard, it is really tricky to get them working cross browser. This article is going to show you all the available workarounds to get the best version […]
  • August 13, 2012 Image Layout Algorithm – Facebook (1)
    Layout Algorithms: Facebook | Google Plus | Lightbox | Lightbox Android | 500px For the redesign of the Photo Section of Facebook we wanted to highlight some photos by making them bigger. It all started with the following mock by Andy Chung: Layout Alternated Blocks My […]