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:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!