Justify the last line of a div?

by

Here’s a cross-browser method that works in IE6+

It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements.

CSS:

p, h1{
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after{
   content: "";
   display: inline-block;
   width: 100%;
}

If you have one line of text, use this to prevent the blank line the above CSS will cause

h1{
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

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

More details:
http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/

More Related Contents:

  1. “text-align: justify;” inline-block elements properly?
  2. Left aligned last row in centered grid of elements
  3. CSS text justify with letter spacing
  4. CSS text align justify big spaces
  5. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  6. How can I override inline styles with external CSS?
  7. Change bootstrap navbar collapse breakpoint without using LESS
  8. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  9. Bootstrap 3 Navbar with Logo
  10. How to automatically crop and center an image
  11. How to make a sticky footer using CSS?
  12. Vertical-align aligns everything else except self
  13. Can CSS force a line break after each word in an element?
  14. How do I wrap text with no whitespace inside a ?
  15. How is font size calculated?
  16. CSS Selector for nth range?
  17. Order of prioritization when using multiple contradictory css files
  18. Media query not working in IE9
  19. CSS-Only Sticky Table Headers In Chrome
  20. SCSS extend a nested selector and override the nested rulesets
  21. How can I get the height of an element using css only
  22. When does CSS’s !important declaration not work?
  23. CSS Blur in IE 11
  24. how to cancel opacity for a child element?
  25. How can I reverse the order of columns in Bootstrap 4?
  26. Less CSS: Mixins with Variable Number of Arguments
  27. Do I not understand the flex-grow property?
  28. Is there a way to style HTML5’s range control?
  29. Keep background image fixed during scroll using css
  30. How to keep :active css style after clicking an element

Leave a Comment