Đôi khi bạn muốn hiển thị nội dung theo định dạng giống như đã gõ trong vùng văn bản. Ví dụ: một văn bản từ vùng văn bản có thể chứa ngắt dòng hoặc dòng trống
Thuộc tính CSS white-space
rất hữu ích khi hiển thị văn bản giống như cách nó được cung cấp bởi người dùng. Bạn không cần nỗ lực thêm để tự phân tích cú pháp và định dạng chuỗi
Giữ nguyên dòng mới, ngắt dòng và khoảng trắng trong HTML
Sử dụng cài đặt white-space: pre;
để hiển thị nội dung dạng dài có chứa khoảng trắng và ngắt dòng theo cách giống như do người dùng cung cấp. Văn bản cũng sẽ ở bên trong ranh giới vùng chứa và hiện tràn qua phần gốc
This is a long-form text.
The content includes whitespace, line breaks with newlines. If the line becomes white long, it needs to wrap.
This is a new paragraph.
Và đây là cách một văn bản trông như thế nào với kiểu dáng CSS white-space: pre-wrap;
|
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
4
khoảng trắng như đối với
white-space =3, nhưng chặn ngắt dòng [gói văn bản] trong nguồn
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
white-space =6
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
Dãy khoảng trắng được giữ nguyên. Các dòng chỉ bị ngắt tại các ký tự dòng mới trong nguồn và tại các phần tử
white-space =7
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
white-space =8
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
Dãy khoảng trắng được giữ nguyên. Các dòng bị ngắt ở các ký tự dòng mới, tại
white-space =7 và khi cần thiết để điền vào các ô dòng
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
code {
white-space: pre;
}
0Trình tự của khoảng trắng là. Các dòng bị ngắt ở các ký tự dòng mới, tại
white-space =7 và khi cần thiết để điền vào các ô dòng
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
code {
white-space: pre;
}
2Hành vi này giống với hành vi của
white-space =8, ngoại trừ việc
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
- Mọi chuỗi khoảng trắng được bảo toàn luôn chiếm dung lượng, kể cả ở cuối dòng
- Cơ hội ngắt dòng tồn tại sau mỗi ký tự khoảng trắng được bảo toàn, kể cả giữa các ký tự khoảng trắng
- Các không gian được bảo toàn như vậy chiếm dung lượng và không bị treo, do đó ảnh hưởng đến kích thước nội tại của hộp [kích thước nội dung tối thiểu và kích thước nội dung tối đa]
Bảng sau đây tóm tắt hành vi của các giá trị white-space
khác nhau
white-space =3CollapseCollapseWrapRemoveHang
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
white-space =4CollapseCollapseNo wrapRemoveHang
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
white-space =6PreservePreserveNo wrapPreserveNo wrap
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
white-space =8PreservePreserveWrapHangHang
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line
code {
white-space: pre;
}
0PreserveCollapseWrapRemoveHangcode {
white-space: pre;
}
2PreservePreserveWrapWrapWrapGhi chú. Có sự phân biệt giữa khoảng trắng và các dấu phân cách không gian khác. Chúng được định nghĩa như sau
không gianDấu cách [U+0020], tab [U+0009] và dấu ngắt đoạn [chẳng hạn như dòng mới]
Tất cả các dấu cách dấu cách khác được định nghĩa bằng Unicode, ngoài những dấu cách đã được định nghĩa là dấu cách
Trường hợp khoảng trắng được cho là treo, điều này có thể ảnh hưởng đến kích thước của hộp khi được đo kích thước nội tại
Đặc tả văn bản CSS chứa một phần xác định chính xác "khoảng trắng bị thu gọn" nghĩa là gì, bao gồm một ví dụ có hình minh họa. Thông thường, nó có nghĩa là giảm các chuỗi gồm nhiều ký tự khoảng trắng xuống còn một ký tự khoảng trắng — mặc dù trong một số trường hợp, điều đó có nghĩa là giảm chúng thành không có ký tự nào [chuỗi trống]
Giá trị ban đầu_______1_______3Áp dụng cho tất cả các phần tửKế thừayesGiá trị được tính toán như đã chỉ địnhKiểu hoạt ảnhrời rạc