CSS text-align-last

The CSS text-align-last property is similar to the text-align property. The only difference is, text-align-last is used to align only the last line of text, horizontally. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .myd{text-align-last: right;}
   </style>
</head>
<body>

   <div class="myd">
      <h2>The text-align-last Property</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, saepe
         voluptatum perferendis necessitatibus molestias soluta deleniti, cum
         eligendi asperiores alias nobis totam eum autem suscipit! Dolor velit
         porro consequatur commodi vitae dolorum? Lorem ipsum dolor, sit amet
         consectetur adipisicing elit. Itaque voluptates eaque rerum earum
         voluptas sed dolor aspernatur enim exercitationem libero!</p>
      <p>Debitis eligendi deserunt provident molestias magni numquam aliquam
         iste incidunt quis deleniti, officia soluta, ipsa assumenda alias! Odit
         debitis corporis eveniet earum beatae repellendus dolor, id consectetur
         minima. Lorem ipsum dolor sit amet consectetur adipisicing.</p>
   </div>
   
</body>
</html>

Output

The text-align-last Property

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, saepe voluptatum perferendis necessitatibus molestias soluta deleniti, cum eligendi asperiores alias nobis totam eum autem suscipit! Dolor velit porro consequatur commodi vitae dolorum? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptates eaque rerum earum voluptas sed dolor aspernatur enim exercitationem libero!

Debitis eligendi deserunt provident molestias magni numquam aliquam iste incidunt quis deleniti, officia soluta, ipsa assumenda alias! Odit debitis corporis eveniet earum beatae repellendus dolor, id consectetur minima. Lorem ipsum dolor sit amet consectetur adipisicing.

Notice - The element (H2) that has text, covering a single line, goes to right, as defined by the text-align-last property.

CSS text-align-last Syntax

The syntax of text-align-last property in CSS, is:

text-align-last: x;

The value of x should be any of the following:

auto - used to justify and align the last line of text to the left. This is the default value
left - used to align the last line of text to the left
right - used to align the last line of text to the right
center - used to align the last line of text to the center
start - used to align the last line of text to start/begin. That is, align the last line of text to the left, if the direction is defined as ltr (left to right), or to the right, if the direction is defined as rtl (right to left)
end - used to align the last line of text to end/right. That is, align the last line of text to the right, if the direction is defined as ltr (left to right), or to the left, if the direction is defined as rtl (right to left)
justify - used to justify the last line of text. That is, all words of last line gets equally spaced to cover the complete line area
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »