How to Center-Justify The Last Line of Text in CSS

Justify the last line of a div?

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/

How can I use text-align-last except when I have only one line of text?

There does not appear to be a way to override text-align-last for when a block container has only one formatted line and text-align is center.

The spec says that text-align-last can be overridden, but only when text-align is start end. This does not seem to apply to any of the other values for text-align.

There are no selectors for elements with zero, one, or n formatted lines, nor is there a ::last-line counterpart to ::first-line. So it seems you're out of luck doing this with pure CSS. You're going to have to use a script to identify section elements with only one line (i.e. section elements whose text isn't wrapping), attach a class name to those elements, and apply text-align-last: center (or auto) to them.

Justifying the last line of text using CSS

Working solution:

.justify-all-lines
{
    /* This element will need layout for the text-justify
     * to take effect in IE7 (and possibly previous versions);
     * this will force it, for more info Google "hasLayout in IE"
     */
    overflow: hidden;
    text-align: justify;

    /* For IE6 to IE7 since they don't support :after */
    -ms-text-justify: distribute-all-lines; /* IE8+ */
    text-justify: distribute-all-lines; /* IE5+ */
}

.justify-all-lines:after
{
    /*
     * We don't need IE6 and IE7 inline-block hack support here
     * since they don't support :after anyways (the text-justify
     * properties for them are above)... IE8 and above have native
     * inline-block support so for IE8+, both the text-justify and
     * :after will take effect but it doesn't have any negative
     * effects since this element is invisible
     */
    display: inline-block;
    width: 100%;
    content: '.';
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

How can I text-align the very last line of my div when there is a br present?

Because a tag is an inline tag,so you should wrap a tag into a block tag,say p tag,and then apply justify css style.

If you have to use a tag alone,following is an example:

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <title>Document</title>  <style>    #textbox {      -ms-text-align-last: center;      -moz-text-align-last: center;      text-align-last: center;    }        a {      display: block;      -ms-text-align-last: justify;      -moz-text-align-last: justify;      text-align-last: justify;    }  </style></head>
<body>  <div class="container">    <div id="textbox">      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore sed magni nesciunt pariatur recusandae quam. Suscipit dolorum, labore exercitationem natus!      <br>      <a href="#">                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nulla autem perferendis enim deleniti magnam incidunt, maxime praesentium amet officiis.            </a>    </div>  </div></body>
</html>

How to left align the 2nd line of a text if initial text-align is center

Instead of doing this (or something similar):

.wrapper {  text-align: center;   width: 100%}

<div class="wrapper">  <p>Title</p>  <div class="text">    Example-TextExample-TextExample-TextExample-Text<br> Example-Text  </div></div>