Thuộc tính white-space

Thuộc tính white-space thiết lập cách xuống dòng của văn bản, đồng thời cách hiển thị khoảng trắng giữa các từ và ngắt dòng (các vị trí nơi Enter được nhấn khi soạn thảo mã).

Cú pháp

bộ chọn {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Giá trị

Giá trị	Mô tả
`nowrap`	Không cho phép văn bản xuống dòng, ngay cả khi nó không vừa với chiều rộng của phần tử chứa (trong trường hợp này văn bản sẽ tràn ra ngoài ranh giới của nó). Tuy nhiên, việc thêm thẻ `br` sẽ buộc văn bản xuống dòng mới.
`pre`	Văn bản được hiển thị giống như khi được soạn trong trình soạn thảo khi dựng trang web: với tất cả khoảng trắng và các dấu enter (nếu trong mã có nhiều khoảng trắng - trên màn hình cũng sẽ có nhiều). Trong trường hợp này trình duyệt sẽ không tự động xuống dòng nếu văn bản không vừa với phần tử chứa - văn bản sẽ tràn ra ngoài ranh giới của nó. Tương tự như thẻ pre, nhưng không giống nó, không thay đổi font thành monospace (về font monospace, xem thuộc tính `font-family`.
`pre-wrap`	Giống với pre, điểm khác biệt là nếu văn bản quá dài và không vừa với phần tử chứa - trình duyệt sẽ xuống dòng cho nó.
`pre-line`	Trình duyệt chỉ tính đến các Enter trong mã HTML và bỏ qua tất cả những thứ khác (nhiều khoảng trắng sẽ hiển thị như một, trình duyệt tự động đặt các ngắt dòng).
`normal`	Hành vi tiêu chuẩn: trình duyệt tự động đặt các ngắt dòng sao cho các từ vừa với phần tử chứa. Nhiều khoảng trắng trong mã sẽ hiển thị như một trên màn hình.

Giá trị mặc định: normal.

Ví dụ . Giá trị nowrap

Trong ví dụ này văn bản sẽ không vừa với phần tử chứa và tràn ra ngoài ranh giới của nó, vì giá trị nowrap được đặt:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Ví dụ . Giá trị nowrap và thẻ br

Nếu thêm thẻ br - văn bản sẽ xuống dòng mới (chính xác tại vị trí có br):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Ví dụ . Giá trị pre

Trong ví dụ này văn bản được hiển thị giống như cách nó được soạn trong trình soạn thảo mã HTML (với tất cả các thụt lề bằng phím Tab, các Enter và các thứ tương tự):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Ví dụ . Giá trị pre-wrap

Nhưng bây giờ văn bản được hiển thị giống như cách nó được soạn trong trình soạn thảo mã HTML, tuy nhiên, các phần tràn ra sẽ được xuống dòng mới:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Xem thêm

các thuộc tính word-break và overflow-wrap,
cho phép xuống dòng các chữ cái của một từ dài
thuộc tính tab-size,
thiết lập kích thước thụt lề được tạo bởi phím Tab
thuộc tính hyphens,
bật tính năng ngắt từ theo âm tiết
thuộc tính overflow,
cắt bỏ các phần tràn ra ngoài ranh giới của khối
thẻ pre,
hiển thị văn bản giống như cách nó được soạn trong trình soạn thảo mã HTML