Tidadigi Logo

CSS text-align-last Property

Thuộc tính text-align-last trong CSS dùng để thiết lập căn chỉnh cho dòng cuối cùng. Dòng cuối nằm trong một khối hoặc đoạn văn, ngay trước line break. Thuộc tính này có thể điều chỉnh dòng cuối cùng của văn bản. Nó giúp văn bản được căn chỉnh trong phần tử chứa, tự nhiên hoặc do thẻ <br>. Bằng cách dùng text-align-last, bạn có thể tinh chỉnh căn chỉnh văn bản. Nhờ đó, bạn có thể đạt hiệu ứng hình ảnh mong muốn và cải thiện khả năng đọc. Bài viết này sẽ khám phá cú pháp, giá trị thuộc tính và ứng dụng thực tế. Chúng ta sẽ tìm hiểu về thuộc tính text-align-last trong CSS.

Tìm hiểu về thuộc tính text-align-last

Thuộc tính text-align-last trong CSS chỉ định căn chỉnh dòng cuối. Dòng này nằm trong một phần tử. Nó đặc biệt hữu ích để điều chỉnh căn chỉnh cho văn bản kết thúc đột ngột. Ví dụ như trong tiêu đề chính, tiêu đề phụ hoặc đoạn văn.

Cú pháp:

text-align-last: auto|start|end|left|right|center|justify|
    initial|inherit;

Giá trị mặc định: Giá trị mặc định của nó là auto.

Giá trị thuộc tính:

  • left: Nó làm cho dòng cuối cùng của đoạn văn căn trái so với vùng chứa.
  • right: Nó làm cho dòng cuối cùng của đoạn văn căn phải so với vùng chứa.
  • center: Nó làm cho dòng cuối cùng của đoạn văn căn giữa so với vùng chứa.
  • justify: Nó làm cho dòng cuối cùng được căn đều hai bên. Dòng cuối sẽ chiếm toàn bộ chiều rộng vùng chứa. Khoảng trắng được thêm vào giữa các từ để đạt được điều này.
  • start: Nó làm cho dòng cuối căn trái nếu hướng văn bản là LTR. Nó làm cho dòng cuối căn phải nếu hướng văn bản là RTL.
  • end: Nó làm cho dòng cuối căn phải nếu hướng văn bản là LTR. Nó làm cho dòng cuối căn trái nếu hướng văn bản là RTL.
  • auto: Nó làm cho dòng cuối của đoạn văn được căn chỉnh theo text-align. Cách căn chỉnh được thực hiện theo thuộc tính text-align của vùng chứa. Điều này xảy ra khi text-align không được đặt thành justify.
  • initial: Nó làm cho dòng cuối của đoạn văn được căn chỉnh theo giá trị mặc định. Căn chỉnh mặc định là căn trái.
  • inherit: Nó làm cho dòng cuối của đoạn văn được căn chỉnh. Căn chỉnh này theo thuộc tính text-align-last của phần tử cha.

Ví dụ: Trong ví dụ này, chúng ta đang sử dụng text-align-last: left.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: left;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: left;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: right;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: right;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: right;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: center;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: center;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: center;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: justify;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: justify;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: justify;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: start;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: start;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: start;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: end;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: end;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: end;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: auto;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: auto;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: auto;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Ví dụ: Trong ví dụ này, chúng ta đang dùng text-align-last: initial;.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        text-align-last property
    </title>

    <!-- CSS style to text-align-last property -->
    <style>
        p {
            text-align-last: initial;
            font-family: sans-serif;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <h2 style="text-align:center">
        text-align-last: initial;
    </h2>

    <!-- text-align-last: left; property -->
    <p>
        Prepare for the Recruitment drive of product
        based companies like Microsoft, Amazon, Adobe
        etc with a free online placement preparation
        course. The course focuses on various MCQ's
        & Coding question likely to be asked in the
        interviews & make your upcoming placement
        season efficient and successful.
    </p>

    <!-- text-align-last: right; property -->
    <p> GeeksForGeeks: A computer science portal</p>

</body>

</html>

Đầu ra:

css-text-align-last-property

Thuộc tính text-align-last trong CSS là một công cụ giá trị. Nó dành cho các nhà phát triển web muốn kiểm soát căn chỉnh dòng cuối. Dòng cuối nằm trong các phần tử khối. Bằng cách hiểu và áp dụng thuộc tính này, bạn có thể cải thiện hình thức trực quan. Bạn có thể làm cho nội dung dễ đọc và thẩm mỹ hơn. Hãy thử nghiệm các tùy chọn căn chỉnh khác nhau để tìm ra lựa chọn tốt nhất. Hãy đảm bảo khả năng tương thích trên các trình duyệt khác nhau. Mục đích là duy trì trải nghiệm người dùng nhất quán.

Trình duyệt được hỗ trợ: Danh sách các trình duyệt hỗ trợ thuộc tính text-align-last:

  • Google Chrome 47.0
  • Edge 12.0
  • Internet Explorer 5.5
  • Firefox 49.0
  • Opera 34.0
  • Safari 16.0

Last Updated : 21/07/2025