Giới hạn dòng hiển thị cho đoạn văn bản

23/07/2023

Err

Cỡ chữ: A^- A⁺

Để trang chủ hoặc trang bài viết của website trở nên đồng đều ở mọi kích thước giao diện (Desktop, Mobile, Table) thì nhất định bạn phải thiết lập giới hạn hiển thị cho đoạn trích của bài viết.

Ví dụ:

Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí và cản trở việc tập trung vào yếu tố trình bày văn bản.

⇩

Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí và cản trở việc tập trung vào yếu tố trình bày văn bản.

Cách thực hiện như sau:

<p class="noi-dung">
		Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí và cản trở việc tập trung vào yếu tố trình bày văn bản.
</p>

.noi-dung {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* Số dòng văn bản tối đa bạn muốn hiển thị */
	overflow: hidden;
	text-overflow: ellipsis;
}