Arrow

CSS Text Align Last

AuthorHariom Prajapati

Pubish Date28 Aug 2022

categoryCSS

It is use to set the horizontal alignment of the last line text that means it is use to display last line text in left ,right ,center or cover full line.

 

Syntax -

text-align-last:value;

 

values

Left

It is use to display texts in left side.(default) 

Right It is use to display texts in right side.
center It is use to display text in center. 
justify
It is use to display text in full line.

 

For example -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Align Last</title>

    <style>
        .para1 {
            text-align-last: left;
        }

        .para2 {
            text-align-last: right;
        }

        .para3 {
            text-align-last: center;
        }

        .para4 {
            text-align-last: justify;
        }
    </style>

</head>

<body>
    <p class="para1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. </p>
    <br><br>
    <p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis.</p>
    <br><br>
    <p class="para3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis.</p>
    <br><br>
    <p class="para4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis. Placeat ut pariatur minus, rem reprehenderit tempora magnam veritatis perspiciatis!, Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam aspernatur dolor qui, tempore quos facilis.</p>
</body>

</html>

 

Output

text align last