Sử dụng thuộc tính CSS white-space để thiết lập cách ứng xử của những khoảng trắng liên tục trong một phần tử HTML, thiết lập tự động xuống dòng hoặc hiện thị nguyên bản
thuộc tính css
white-space thiết lập ứng xử khoảng trắng (space,
xuống dòng, tab …)
normal
nowrap
pre
pre-line
pre-wrap
inherit
<div style="width: 200px;border: 1px dotted; padding: 5px;"> Đây là văn bản <strong>HTML</strong> bên trong phần tử cha <div> có chiều rộng 200px. Văn bản này <br> có nhiều khoảng trắng, có cả ký tự xuống dòng </div>
Đây là văn bản
HTML bên trong
phần tử cha <div> có chiều rộng 200px.
Văn bản này
có nhiều khoảng trắng, có cả
ký tự xuống dòng
???
Thuộc tính white-space trong CSS
Thuộc tính white-space để điều khiển cách hiện thị khoảng trắng (các ký tự space, xuống
dòng, tab …)
trong một phần tử. Nó có thể nhận các giá trị như:
- normal : thiết lập về mặc định. Các khoảng trắng liên tục nếu có sẽ thu
gọn về một khoảng trắng - nowrap ứng xử giống normal, nhưng các dòng chữ (inline)
không tự xuống dòng nếu vượt quá chiều rộng phần tử chứa. - pre giữ nguyên các khoảng trắng liên tục,
và chỉ xuống dòng khi gặp ký tự xuồng dòng \n hoặc phần tử <br> - pre-line các khoảng trắng liên tục cũng thu gon về 1,
văn bản tự xuống dòng khi vượt chiều rộng phần tử chứa - pre-wrap khoảng trắng liên tục giữ nguyên. Tự xuống dòng
khi vượt chiều rộng phần tử chứa. - inherit : kế thừa thuộc tính white-space của phần tử cha
<style> p.nowrap { white-space: nowrap; } p.pre { white-space: pre; } p.preline { white-space: pre-line; } p.prewrap { white-space: pre-wrap; } </style> <div class="card p-1" style="width: 200px"> <p class="nowrap"> Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản </p> <p class="pre"> Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản </p> <p class="preline"> Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản </p> <p class="prewrap"> Ví dụ white-space sự dùng để điều khiển khoảng trắng trong văn bản </p> </div>
Ví dụ white-space sự dùng để điều khiển
khoảng trắng trong văn bản
Ví dụ white-space sự dùng để điều khiển
khoảng trắng trong văn bản
Ví dụ white-space sự dùng để điều khiển
khoảng trắng trong văn bản
Ví dụ white-space sự dùng để điều khiển
khoảng trắng trong văn bản
ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB
Đăng ký nhận bài viết mới