Sử dụng -webkit-line-clamp

Trong quá trình phát triển web, đôi khi chúng ta cần giới hạn độ dài văn bản hay giới hạn số lượng dòng hiển thị trong một đoạn văn bản.

Một trong những phương pháp phổ biến để giới hạn số lượng dòng hiển thị trong một đoạn văn bản là sử dụng thuộc tính -webkit-line-clamp. Thuộc tính này cho phép chúng ta chỉ định số lượng dòng tối đa mà văn bản sẽ hiển thị.

Để sử dụng phương pháp này, chúng ta cần chỉ định các thuộc tính sau cho phần tử văn bản mà chúng ta muốn giới hạn:

div {
  display: -webkit-inline-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

display: -webkit-inline-box: Chuyển đổi phần tử văn bản thành một hộp inline-box. Điều này giúp đảm bảo rằng văn bản sẽ được hiển thị trong một dòng duy nhất.
overflow: hidden: Ẩn các dòng văn bản bị cắt.
-webkit-line-clamp: 2: Chỉ định số lượng dòng tối đa mà văn bản sẽ hiển thị. Cụ thể ở đây là 2 dòng.
-webkit-box-orient: vertical: Chuyển đổi hộp inline-box thành một hộp có chiều dọc. Điều này giúp đảm bảo rằng văn bản sẽ được hiển thị theo chiều dọc.

Ví dụ: giới hạn đoạn văn bản trong <div> có hai dòng. Nếu đoạn văn bản dài hơn 2 dòng, nó sẽ bị cắt và chèn vào phía trước dấu 3 chấm "...".

See the Pen Limit text length to N lines by ARTRU (@artrublog) on CodePen.

Ưu điểm của phương pháp webkit-line-clamp

Phương pháp này rất đơn giản và dễ sử dụng.

Phương pháp này có thể được sử dụng để giới hạn số lượng dòng hiển thị trong một đoạn văn bản bất kỳ, bất kể chiều rộng hoặc chiều cao của phần tử văn bản đó.

Nhược điểm của phương pháp webkit-line-clamp

Thuộc tính -webkit-line-clamp không tương thích hoàn toàn 100% trên các trình duyệt. Tuy nhiên các trình duyệt lớn vẫn hỗ trợ.

Trình duyệt tương thích -webkit-line-clamp

Phương pháp này có thể không hoạt động chính xác trên các trình duyệt có kích thước phông chữ mặc định nhỏ.

Kết luận

Phương pháp -webkit-line-clamp là một phương pháp hiệu quả để giới hạn số lượng dòng hiển thị trong một đoạn văn bản. Phương pháp này tương đối đơn giản và dễ sử dụng, và có thể được áp dụng cho bất kỳ phần tử văn bản nào.