Thuộc tính text-align-last trong CSS
Bùi Tấn Lực - 903
- 03/10/2025
Chức năng của Thuộc tính text-align-last trong CSS
Thuộc tính text-align-last trong CSS dùng để canh lề trái, phải, giữa, đều hai bên cho dòng cuối cùng của các phần tử con trong phần tử cha, nếu phần tử con chỉ có một dòng thì canh lề cho chính 1 dòng đó.
Cú pháp của Thuộc tính text-align-last trong CSS
text-align-last: giatri;
giatri: Giá trị để canh lề trái, phải, giữa, đều hai bên cho dòng cuối cùng (Ví dụ: right, left, justify, center)
Các giá trị của Thuộc tính text-align-last trong CSS
right: Canh lề phải cho dòng cuối.
left: Canh lề trái cho dòng cuối.
justify: Canh đều 2 bên cho dòng cuối.
center: Canh giữa cho dòng cuối
Code Thuộc tính text-align-last trong CSS
text-align-last: right; Canh lề phải cho dòng cuối
text-align-last: left; Canh lề trái cho dòng cuối
text-align-last: justify; Canh đều 2 bên cho dòng cuối
text-align-last: center; Canh giữa cho dòng cuối
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-align-last trong CSS</title>
<style>
div{background:#ddd;margin-bottom:15px}
</style>
</head>
<body>
<h1>Code Thuộc tính text-align-last trong CSS</h1>
<p>Dùng để canh lề trái, phải, giữa, đều hai bên cho dòng cuối cùng của các phần tử con trong phần tử cha, nếu phần tử con chỉ có một dòng thì canh lề cho chính 1 dòng đó:</p>
<!--Dùng text-align: justify để canh đều hai bên trước-->
<!---moz dùng cho trình duyệt Firefox-->
<div style="text-align: justify; -moz-text-align-last: right; text-align-last: right;">
<h3>text-align-last: right; Canh lề phải cho dòng cuối</h3>
<p>Hãy Chạy thử Code Thuộc tính text-align-last trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div style="text-align: justify; -moz-text-align-last: left; text-align-last: left;">
<h3>text-align-last: left; Canh lề trái cho dòng cuối</h3>
<p>Hãy Chạy thử Code Thuộc tính text-align-last trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div style="text-align: justify; -moz-text-align-last: justify; text-align-last: justify;">
<h3>text-align-last: justify; Canh đều 2 bên cho dòng cuối</h3>
<p>Hãy Chạy thử Code Thuộc tính text-align-last trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
<div style="text-align: justify; -moz-text-align-last: center; text-align-last: center;">
<h3>text-align-last: center; Canh giữa cho dòng cuối</h3>
<p>Hãy Chạy thử Code Thuộc tính text-align-last trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả</p>
</div>
</body>
</html>
Khi nào nên sử dụng thuộc tính text-align-last trong CSS?
text-align-last phù hợp khi bạn cần kiểm soát riêng cách căn chỉnh dòng cuối của một đoạn văn, đặc biệt khi nội dung đang sử dụng text-align: justify. Thuộc tính này giúp phần kết thúc của đoạn văn có cách trình bày rõ ràng hơn mà không làm thay đổi cách căn chỉnh các dòng phía trên.
Căn chỉnh dòng cuối của đoạn văn khi dùng text-align: justify
Khi áp dụng text-align: justify, các dòng trong đoạn văn thường được kéo giãn để tạo hai mép thẳng. Tuy nhiên, dòng cuối thường không được căn đều theo cách này. Nếu muốn xác định rõ dòng cuối nằm bên trái, bên phải hoặc ở giữa, bạn có thể kết hợp text-align-last.
<p class="content">Đây là đoạn văn sử dụng text-align: justify để căn đều nội dung. Dòng cuối có thể được điều chỉnh riêng bằng thuộc tính text-align-last.</p>
<style>
.content {
text-align: justify;
text-align-last: center;
}
</style>
Trong ví dụ trên, các dòng thông thường vẫn được căn đều, còn dòng cuối được đưa vào giữa đoạn văn. Cách này hữu ích khi muốn tạo điểm kết thúc cân đối cho những khối nội dung dài.
Tạo bố cục văn bản đồng nhất trong giao diện website
text-align-last có thể được sử dụng trong các khu vực chứa nhiều đoạn văn như bài viết, phần giới thiệu, mô tả sản phẩm hoặc nội dung tin tức. Việc kiểm soát dòng cuối giúp văn bản có bố cục nhất quán hơn, nhất là khi các đoạn có độ dài khác nhau.
Chẳng hạn, bạn có thể để phần nội dung chính căn đều nhưng giữ dòng cuối căn trái để cách đọc tự nhiên hơn:
<div class="article">
<p>Nội dung bài viết được trình bày theo dạng căn đều để tạo bố cục gọn gàng và cân đối trên trang.</p>
</div>
<style>
.article p {
text-align: justify;
text-align-last: left;
}
</style>
Cách thiết lập này đặc biệt phù hợp với các giao diện ưu tiên khả năng đọc. Thay vì áp dụng một kiểu căn chỉnh cho toàn bộ đoạn văn, bạn có thể xử lý riêng phần kết thúc để văn bản không bị trình bày thiếu tự nhiên.
Những trường hợp không cần dùng text-align-last
Nếu nội dung chỉ sử dụng cách căn trái, căn phải hoặc căn giữa thông thường và không có nhu cầu xử lý riêng dòng cuối, text-align-last thường không cần thiết. Khi đó, chỉ cần sử dụng text-align là đủ để kiểm soát cách hiển thị văn bản.
Bạn cũng không nên thêm thuộc tính này chỉ để làm CSS dài hơn. Hãy sử dụng khi dòng cuối cần có cách căn chỉnh khác với phần còn lại của đoạn văn. Điều này giúp mã CSS dễ hiểu, dễ bảo trì và phù hợp hơn với mục đích thiết kế.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-align-last trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
