Thuộc tính text-overflow

Thuộc tính text-overflow thêm dấu ba chấm vào cuối văn bản bị cắt để đánh dấu rằng văn bản không vừa với khối và đã bị cắt bớt.

Để thuộc tính hoạt động, văn bản phải được cắt bằng thuộc tính overflow hoặc thuộc tính overflow-x với giá trị hidden, auto hoặc scroll. Nếu đặt là visible (đây là giá trị mặc định) - text-overflow sẽ không hoạt động.

Cú pháp

bộ chọn {
	text-overflow: ellipsis | clip;
}

Giá trị

Giá trị	Mô tả
`ellipsis`	Thêm dấu ba chấm vào cuối văn bản bị cắt.
`clip`	Không thêm dấu ba chấm vào cuối (đây là giá trị mặc định, dùng để hủy tác dụng của thuộc tính khi cần thiết).

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

Ví dụ . Văn bản tràn ra ngoài

Trong ví dụ này, từ rất dài sẽ không vừa với container và sẽ tràn ra ngoài ranh giới của nó. Không có hiện tượng cắt xén:

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

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Ví dụ . Thêm thuộc tính overflow

Bây giờ, tất cả những gì tràn ra ngoài ranh giới container, sẽ đơn giản bị cắt bớt:

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

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Ví dụ . Giá trị ellipsis

Bây giờ, ngoài thuộc tính overflow, chúng ta thêm text-overflow với giá trị ellipsis. Văn bản bị cắt sẽ được thêm dấu ba chấm vào cuối:

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

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ví dụ . Với thanh cuộn

Nếu đặt overflow: auto và text-overflow: ellipsis, thanh cuộn sẽ xuất hiện, nhưng dấu ba chấm vẫn sẽ được thêm. Hãy thử cuộn thanh cuộn trong ví dụ:

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

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ví dụ . Nếu không có từ quá dài

Nếu không có từ nào dài đến mức tràn ra ngoài ranh giới container, thì việc cắt xén sẽ không xảy ra (vì không có gì tràn ra). Hãy xem ví dụ sau:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Ví dụ . Văn bản trên một dòng

Tuy nhiên, có những tình huống chúng ta muốn văn bản bị cắt nếu nó quá dài (văn bản nói chung, không phải từng từ riêng lẻ) và không xuống dòng. Điều này được thực hiện bằng cách thêm thuộc tính white-space với giá trị nowrap, giá trị này cấm ngắt văn bản xuống dòng khác. Hãy xem ví dụ, bây giờ văn bản bị cắt:

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

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

Ví dụ . Chiều rộng theo phần trăm

Nếu đặt chiều rộng khối bằng %, việc cắt xén cũng sẽ hoạt động chính xác:

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

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Xem thêm

các thuộc tính word-break và overflow-wrap,
cho phép ngắt các chữ cái của từ dài xuống dòng mới
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 khối