Justify the Last Line of a Div

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 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>

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;
}

Justify the last line of a block element (p, div) when using Japanese tategaki (writing-mode: tb-rl)

You need to use a slight variation of the method I posted for justifying horizontal text.

Instead of setting the width of the :after pseudo element to 100%, set the height to 100%.

CSS:

p {
    margin: 0;
    margin-left: -1.8em; /* remove space added by p:after (adjust) */
}

/* justify last line of text */
p:after {
    content: "";
    display: inline-block;
    height: 100%;
}

/* set writing direction on container */
div.page {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: justify;
    text-justify: inter-ideograph; /* supported by IE */
}

HTML:

<div class="page">
    <p>あれは<ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。</p>
</div>

The :after pseudo element adds extra space after the paragraphs due to its line-height (you can't remove the line-height just from it alone as it's treated as just another piece of text within the p tag). To compensate for this you need to add a negative left margin to the paragraphs.

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

Make the last line of each paragraph shorter than the rest

This is not available as a feature of CSS, however you can work around this limitation using CSS's ::after pseudo-element like this:

p {  text-align: justify;  text-align-last: left;}
p::after {  content: '––––––––––––––––––––';  visibility: hidden;  white-space: nowrap;}

<p style='width: 380px'>  Lorem ipsum dolor sit amet, consectetur adipiscing 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.  Duis aute irure dolor in   reprehenderit in voluptate velit esse cillum dolore eu   fugiat nulla pariatur. Excepteur sint occaecat cupidatat   non proident, sunt in culpa qui officia deserunt mollit   anim id est laborum.</p>

Justify the Last Line of a Div