Dấu ngắt dòng có thể được thêm vào các phần tử HTML mà không cần phải sử dụng dấu ngắt dòng <br> bằng cách sử dụng phần tử giả. Phần tử giả được sử dụng để tạo kiểu cho một phần cụ thể của phần tử. Ở đây chúng ta sẽ sử dụng ::after để tạo kiểu cho một phần tử HTML để thêm dấu ngắt dòng.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
</style>
<body>
<div>
<span>Dumbledore</span>
<span>McGonagall</span>
<span>Snape</span>
<span>Trelawney</span>
</div>
</body>
</html>
Trong đoạn mã trên, chúng tôi sử dụng phần tử giả ::after trên mỗi phần tử nội dòng (được biểu thị bằng span) để thêm một dấu xuống dòng (được biểu thị bằng "\ a") sau dòng văn bản của span. ::after trong trường hợp này có một thuộc tính nội dung và một thuộc tính khoảng trắng có sẵn để chúng tôi sử dụng.
Thuộc tính "content" mô tả nội dung chúng tôi muốn đưa vào span. Thuộc tính khoảng trắng cho chúng ta biết liệu chúng ta có bảo tồn khoảng trắng hay không. Việc tắt thuộc tính cụ thể này không ảnh hưởng đến đặc tính khối nội tuyến của khoảng. Vì vậy, chúng tôi phải thêm thuộc tính cụ thể này để ghi đè điều đó.
Khi bạn ngày càng lộn xộn với việc tạo kiểu và bố cục, có thể bạn sẽ thấy giải pháp trên không nhất thiết là giải pháp tốt nhất. Nếu bạn thêm phần đệm thuộc bất kỳ loại nào và cả nền, bạn sẽ thấy rằng các thuộc tính CSS đó có xu hướng lộn xộn với vị trí phát huy tác dụng của nền. Xem ví dụ mã bên dưới minh họa điểm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Break</title>
</head>
<style>
span {
padding: 1px 8px;
background: pink;
}
span::before {
content: "\A";
white-space: pre;
}
</style>
<body>
<div>
<p>Professor <span>Dumbledore</span></p>
<p>Professor <span>McGonagall</span></p>
<p>Professor <span>Snape</span></p>
<p>Professor <span>Trelawney</span></p>
</div>
</body>
</html>
Có những giải pháp khác cung cấp kết quả tương tự cho điều này - trong đó nền bắt đầu trên dòng trước đó và sau đó thực hiện ký tự xuống dòng với văn bản trên nền chính xác ở dòng tiếp theo. Thuộc tính CSS box decoration break: clone là một điều mà bạn nghĩ đến có thể được thêm vào lớp span ở trên để đạt được kết quả tương tự, nhưng không thực sự mang lại cho chúng ta kết quả như mong muốn.
Sử dụng các phần tử cấp khối như <p> hoặc <div> là một giải pháp hấp dẫn. Nhưng còn những lúc bạn muốn sử dụng một giá trị hiển thị khác thì sao? Điều này đưa chúng ta đến tùy chọn bố trí bảng.
Trong trình chỉnh sửa mã, trong bộ chọn CSS span, hãy xóa các thuộc tính ở đó và thay thế nó bằng display:table. Sử dụng điều này không chỉ làm cho mã của bạn sạch hơn mà còn cung cấp cho bạn chính xác bố cục cần thiết để hiển thị thông tin. Chúng tôi không sử dụng cách bố trí bàn theo nghĩa truyền thống, nhưng nó cung cấp cho chúng tôi chính xác những gì chúng tôi cần để hoàn thành công việc.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.