How to align the last line of a paragraph element to the right using CSS?

How to align the last line of a paragraph element to the right using CSS?

Last Updated : 30 Dec, 2020

In this article, we will set the alignment of last paragraph element to the right by using CSS property. To set the alignment of last paragraph to right, we use CSS text-align-last property.

The text-align-last is used to set the last line of the paragraph just before the line break. The line break may be due to the natural ending of a paragraph, or it may be due to the use of <br> tag. The text-align-last property sets the alignment of all the last lines occurring in the element in which the text-align-last property is applied. For example, if the text-align-last property is applied to the <p> element then, all the last lines of the <p> element will be affected by the text-align-last property.

Syntax:

text-align-last: right

Example:

HTML

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

<head>
    <title>
        How to align last line of a
        paragraph element to the
        right using CSS?
    </title>

    <style>
        h1 {
            color: green;
        }

        p {
            text-align: justify;
            -moz-text-align-last: right;
            text-align-last: right;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        How to align last line of a
        paragraph <br>element to the
        right using CSS?
    </h3>

    
<p>
        Cascading Style Sheets, fondly referred
        to as CSS, is a simply designed language
        intended to simplify the process of making
        web pages presentable. CSS allows you to
        apply styles to web pages. More importantly,
        CSS enables you to do this independent of
        the HTML that makes up each web page.
    </p>

</body>

</html>

Output:

Supported Browsers: The browser supported by text-align-last property are listed below:

Google Chrome 47.0
Internet Explorer 5.5
Firefox 49.0, 12.0 -moz-
Opera 34.0

How to align the last line of a paragraph element to the right using CSS?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to add a class to the last paragraph element using jQuery ?

In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements. Syntax: $(s

How to Align One Item to the Right using CSS Flexbox ?

Methods to Align a Single Item to the Right using CSS Flexbox:1. Using margin-left: autoApplying margin-left: auto to the specific flex item pushes it to the right, utilizing the available space.HTML<html> <head> <style> .flex-container { display: flex; background-color: #f0f0f0; p

How to set indent the second line of paragraph using CSS ?

There are several methods to indent the second line of the paragraph that can be achieved in many ways. Some of the methods to achieve this are described below with proper code and output. Now some styling can be done using CSS in various ways to indent the second line as per need. Note: By default,

How to display paragraph elements as inline using CSS ?

The purpose of this article is to display paragraph elements as inline elements using CSS. The display property in CSS is used for placing the components ("div", "hyperlink", "heading", etc) on the web page. The display property is set to inline. It has the default property of "anchor" tags. It is u

How to stop any element to be floated on the sides of paragraph element in CSS ?

In this article, we will learn How to stop an element from being floated on the sides of a paragraph element in CSS. The clear property is used to control an element from being floated on the sides of a paragraph. Approach: The clear property is used to control an element from being floated on the s