9.1 Thuộc tính text-indent
Các thuộc tính đoạn văn trong CSS đóng vai trò quan trọng trong việc quản lý định dạng văn bản, đảm bảo sự dễ dàng trong việc đọc và sự hấp dẫn về mặt thẩm mỹ. Trong số đó, text-indent và text-align-last là những công cụ quan trọng để điều chỉnh thụt lề và căn chỉnh dòng cuối cùng của văn bản trong đoạn.
Thuộc tính text-indent điều chỉnh thụt lề của dòng đầu tiên của văn bản trong một phần tử khối. Nó thường được sử dụng để tạo ra sự thụt lề ở đầu đoạn văn nhằm cải thiện độ đọc và cấu trúc văn bản.
Giá trị:
- Giá trị tuyệt đối: giá trị trong các đơn vị cố định như pixel (
px), điểm (pt), centimet (cm) và v.v. Ví dụ,text-indent: 20px; - Giá trị phần trăm: giá trị tính theo phần trăm so với độ rộng của khối chứa. Ví dụ,
text-indent: 5%; - Giá trị âm: thụt lề có thể là giá trị âm, dẫn đến việc căn chỉnh văn bản sang trái vượt ra khỏi biên của container. Ví dụ,
text-indent: -20px;
Ví dụ sử dụng:
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Đây là đoạn văn với thụt lề dòng đầu tiên là 20 pixel.</p>
<p class="indent-5percent">Đây là đoạn văn với thụt lề dòng đầu tiên là 5 phần trăm độ rộng khối.</p>
<p class="indent-negative">Đây là đoạn văn với thụt lề âm của dòng đầu tiên là 20 pixel.</p>
</body>
9.2 Thuộc tính text-align-last
Thuộc tính text-align-last điều chỉnh căn chỉnh dòng cuối cùng của văn bản trong một phần tử khối. Nó rất hữu ích để đạt được căn chỉnh đồng nhất trong đoạn, đặc biệt khi văn bản được căn chỉnh theo bề rộng (justify).
Giá trị:
auto: dòng cuối cùng được căn chỉnh như văn bản thông thường (giá trị mặc định)left: dòng cuối cùng được căn chỉnh bên tráiright: dòng cuối cùng được căn chỉnh bên phảicenter: dòng cuối cùng được căn chỉnh giữajustify: dòng cuối cùng được căn chỉnh theo bề rộng, giống như các dòng khác trong đoạn
Ví dụ sử dụng:
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Đây là đoạn văn với văn bản được căn chỉnh theo bề rộng và dòng cuối căn trái.</p>
<p class="justify-right">Đây là đoạn văn với văn bản được căn chỉnh theo bề rộng và dòng cuối căn phải.</p>
<p class="justify-center">Đây là đoạn văn với văn bản được căn chỉnh theo bề rộng và dòng cuối căn giữa.</p>
<p class="justify-justify">Đây là đoạn văn với văn bản và dòng cuối đều được căn chỉnh theo bề rộng.</p>
</body>
9.3 Sử dụng kết hợp các thuộc tính
Các thuộc tính text-indent và text-align-last có thể được sử dụng cùng nhau để tạo ra định dạng đoạn phức tạp hơn, cải thiện độ đọc và cấu trúc hình ảnh của văn bản.
Ví dụ HTML và CSS:
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Đoạn văn này có dòng đầu thụt lề 30 pixel, văn bản căn chỉnh theo bề rộng, và dòng cuối căn phải.
Điều này thể hiện việc sử dụng kết hợp các thuộc tính text-indent và text-align-last để đạt được hiệu ứng định dạng mong muốn.
</p>
</body>
Giải thích mã:
text-indent: 30px;: đặt thụt lề dòng đầu của văn bản là 30 pixeltext-align: justify;: căn chỉnh văn bản theo bề rộng containertext-align-last: right;: căn chỉnh dòng cuối của văn bản bên phảiwidth: 300px;: đặt độ rộng của container cho văn bảnborder: 1px solid #000;: thêm viền quanh container văn bảnpadding: 10px;: đặt khoảng cách bên trong container
GO TO FULL VERSION