Thuộc tính khoảng trắng kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng. Giả sử bạn có HTML chính xác như sau:
A bunch of words you see. Bạn đã tạo kiểu cho div để có chiều rộng đã đặt là 100px. Ở kích thước phông chữ hợp lý, đó là quá nhiều văn bản để vừa với 100px. Nếu không làm bất cứ điều gì, white-spacegiá trị mặc định là normalvà văn bản sẽ bao quanh. Xem ví dụ bên dưới hoặc làm theo tại nhà với bản demo.
div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )
Nếu bạn muốn ngăn văn bản bị gói, bạn có thể áp dụng white-space: nowrap;
Lưu ý trong ví dụ về mã HTML ở đầu bài viết này, thực tế có hai ngắt dòng, một trước dòng văn bản và một sau cho phép văn bản nằm trên dòng riêng của nó (trong mã). Khi văn bản hiển thị trong trình duyệt, những dấu ngắt dòng đó xuất hiện như thể chúng bị loại bỏ. Ngoài ra còn có các khoảng trống thừa trên dòng trước chữ cái đầu tiên. Nếu chúng ta muốn buộc trình duyệt hiển thị các ngắt dòng đó và các ký tự khoảng trắng thừa, chúng ta có thể sử dụngwhite-space: pre;
Nó được gọi là prevì hành vi giống như thể bạn đã gói văn bản trong
Có lẽ bạn thích cách pretôn vinh khoảng trắng và ngắt, nhưng bạn cần văn bản được bao bọc thay vì có khả năng thoát ra khỏi vùng chứa mẹ của nó. Đó là những gì white-space: pre-wrap;dành cho:
Cuối cùng, white-space: pre-line;sẽ ngắt các dòng mà chúng ngắt trong mã, nhưng khoảng trắng thừa vẫn bị loại bỏ.
Điều thú vị là điểm ngắt dòng cuối cùng không được vinh danh. Theo thông số kỹ thuật CSS 2.1: “Các dòng bị ngắt ở các ký tự dòng mới được bảo toàn và khi cần thiết để điền vào các hộp dòng.” vì vậy có lẽ điều đó có ý nghĩa.
Dưới đây là bảng để hiểu các hành vi của tất cả các giá trị khác nhau:
| Dòng mới | Dấu cách và tab | Gói văn bản | |
|---|---|---|---|
| bình thường | Sự sụp đổ | Sự sụp đổ | Bọc lại |
| trước | Bảo tồn | Bảo tồn | Không quấn |
| bây giờ | Sự sụp đổ | Sự sụp đổ | Không quấn |
| bọc trước | Bảo tồn | Bảo tồn | Bọc lại |
| dòng trước | Bảo tồn | Sự sụp đổ | Bọc lại |
Trong CSS3, thuộc white-spacetính theo nghĩa đen sẽ đi theo biểu đồ đó và ánh xạ các thuộc tính đến text-space-collapsevà text-wraptương ứng.
Thêm thông tin
- Tài liệu Mozilla
Hỗ trợ trình duyệt
Phức tạp hơn một chút so với bảng hỗ trợ thông thường, vì mỗi giá trị có các mức hỗ trợ khác nhau:
| Trình duyệt | Phiên bản | Hỗ trợ cho |
|---|---|---|
| trình duyệt web IE | 5.5 | normal | nowrap |
| 6.0 | normal | pre | nowrap |
|
| 8+ | normal | pre | nowrap | pre-wrap | pre-line |
|
| Firefox (Gecko) | 1,0 (1,0) | normal | pre | nowrap | -moz-pre-wrap |
| 3.0 (1.9) | normal | pre | nowrap | pre-wrap | -moz-pre-wrap |
|
| 3.5 (1.9.1) | normal | pre | nowrap | pre-wrap | pre-line |
|
| Opera | 4.0 | normal | pre | nowrap |
| 8.0 | normal | pre | nowrap | pre-wrap |
|
| 9.5 | normal | pre | nowrap | pre-wrap | pre-line |
|
| Safari (WebKit) | 1,0 (85) | normal | pre | nowrap |
| 3.0 (522) | normal | pre | nowrap | pre-wrap | pre-line |