Cắt css hai dòng

Với tràn văn bản, dấu chấm lửng có thể được áp dụng cho một dòng văn bản, miễn là các điều kiện sau được đáp ứng. [ Để cắt ngắn sau nhiều dòng, hãy tiếp tục đọc 😉 ]

• phần tử phải có

  width , max-width hoặc flex-basis (nếu sử dụng flex)

• phần tử phải có thuộc tính

  gói từ. bây giờ

• thuộc tính tràn phải có giá trị khác với giá trị hiển thị

  ví dụ. tràn ra. ẩn giấu;

• phải có giá trị hiển thị dưới dạng khối, khối nội tuyến hoặc bất kỳ giá trị tương đương nào khác, chẳng hạn như mục linh hoạt, v.v. trưng bày. nội tuyến sẽ không hoạt động ở đây

  ví dụ. trưng bày. chặn Nội tuyến;

Bạn có biết rằng bạn có thể đảo ngược hướng cắt ngắn bằng cách sử dụng thuộc tính hướng CSS không?

direction: rtl; //show from right to left

Thuộc tính direction sẽ cắt bớt văn bản ở đầu dòng và thay vào đó hiển thị phần cuối của đoạn văn

2) Cắt bớt văn bản sau nhiều dòng bằng cách sử dụng kẹp dòng

.truncate-line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; 
  width: 250px;
  overflow: hidden;
}

Với văn bản kẹp dòng có thể được cắt bớt sau nhiều dòng, điều thú vị hơn nữa là bạn có thể cắt bớt nó bằng cách chỉ định số dòng mà bạn muốn cắt bớt. ví dụ. -webkit-line-kẹp. 3;

Dưới đây là danh sách các điều kiện cần được đáp ứng để thực hiện công việc này

• thuộc tính hiển thị phải là hộp webkit

  ví dụ. trưng bày. -webkit-hộp;

• giá trị webkit-line-clamp phải được chỉ định, giá trị phải lớn hơn 0

  ví dụ. webkit-line-kẹp. 3;

• box-orient nên được đặt thành dọc

  ví dụ. -webkit-box-orient. thẳng đứng;

• thuộc tính tràn nên có giá trị ẩn

  ví dụ. tràn ra. ẩn giấu;

tính tương thích của trình duyệt web. webkit-line-clamp tại thời điểm này không được hỗ trợ trong IE. Để biết thông tin chi tiết tham khảo. chó săn. com

Để cắt văn bản dài hơn chiều rộng của khu vực chúng tôi muốn sử dụng, tôi khuyên bạn nên áp dụng các phương pháp CSS Truncate. Đối với nhu cầu của bạn, bạn có thể chọn từ giải pháp một dòng hoặc cắt bớt nhiều dòng

CSS Truncate Dòng đơn

Chúng tôi thường sử dụng cái này với chiều rộng 100% của phần tử vùng chứa, chẳng hạn như phần tử div

Giả sử chúng ta có một dòng văn bản dài mà chúng ta muốn sử dụng. Nhưng văn bản dài hơn khu vực sử dụng của chúng tôi. Vì vậy, chúng tôi muốn cắt bớt nó bằng CSS

Mã của chúng tôi cho Cắt ngắn một dòng là

.singleLineTruncate {
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

 

Cắt CSS nhiều dòng

Hãy xem xét rằng việc cắt bớt một dòng không phải là điều chúng ta muốn. Chúng tôi cần chính xác 2 hoặc 3 dòng để được cắt ngắn

Chúng tôi sử dụng các loại nhu cầu cắt bớt này cho các tiêu chuẩn của Thiết kế UX trong khi thêm mô tả cho một khu vực hạn chế. Giao diện người dùng thiết bị di động là một ví dụ điển hình cho những nhu cầu như vậy

Hiển thị 1 hoặc 2 dòng tiêu đề có vẻ tốt trên các thiết kế như thẻ hoặc đoạn trích, cũng rất quan trọng để xử lý văn bản thừa tràn trong cùng một dòng

Nhà phát triển giao diện người dùng thường cắt bớt văn bản thừa trong dòng bằng cách áp dụng dấu chấm lửng văn bản, có nghĩa là hiển thị 3 dấu chấm (giải thích trực quan rằng thậm chí còn có nhiều văn bản hơn, có thể được xử lý bằng cách áp dụng thuộc tính tiêu đề cho thành phần và hiển thị toàn văn khi di chuột)

Dấu chấm lửng cho văn bản một dòng

Áp dụng dấu chấm lửng cho một lượt thích thật dễ dàng. Chỉ yêu cầu 3 dòng CSS. Thực hiện theo mã dưới đây

.text-ellipsis{
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.text-ellipsis--2{
  text-overflow:ellipsis;
  overflow:hidden;
  // Addition lines for 2 line or multiline ellipsis
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

Tương tự, bạn có thể áp dụng cho 3 dòng trở lên bằng cách sửa đổi giá trị -webkit-line-clamp

Bootstrap 4

Bootstrap 4 có một lớp sẵn có cho dấu chấm lửng 1 dòng,. Đối với cắt bớt văn bản nhiều dòng, hãy thêm một kiểu riêng giống như mã bên dưới

Trong phát triển giao diện người dùng, bao gồm cả React, thông thường phải cắt bớt văn bản hiển thị cho người dùng. Có rất nhiều lý do để làm như vậy. Đó có thể là để tiết kiệm diện tích màn hình quý giá, để làm cho các phần khác nhau của giao diện người dùng xuất hiện đồng nhất, để cung cấp thông tin ít quan trọng hơn cho người dùng sau một nút chuyển đổi và danh sách sẽ tiếp tục

Hầu hết các nhà phát triển giao diện người dùng sẽ biết cách triển khai cắt bớt văn bản cho một dòng văn bản. Nó yêu cầu chiều rộng đã đặt và sử dụng kết hợp các quy tắc CSS overflow: hidden, white-space: nowrap và text-overflow: ellipsis. Tất cả những thứ này cùng nhau sẽ làm cho văn bản bị cắt bớt sau một dòng và thêm dấu chấm lửng ở cuối văn bản nếu quy tắc CSS cuối cùng được áp dụng

Vấn đề giao diện người dùng phổ biến. nội dung văn bản được hiển thị bên trong một số thành phần giao diện người dùng (thẻ). Nhưng vì độ dài của chúng đều khác nhau nên giao diện người dùng trở nên không nhất quán

Nhưng điều đó chỉ hoạt động đối với việc cắt bớt văn bản một dòng. Trong một số trường hợp nhất định, giao diện người dùng có thể cắt bớt văn bản sau nhiều dòng thay vì chỉ một dòng. So với cắt bớt văn bản một dòng, những lý do tương tự để làm như vậy cũng được áp dụng nhưng ở dạng hơi khác. Nhưng làm thế nào bạn có thể thực hiện điều này?

Phương pháp giải quyết

Thật không may, trong một thời gian dài, không có cách nào dễ dàng để thực hiện cắt bớt văn bản nhiều dòng. Tất cả các giải pháp sẽ xoay quanh việc đếm từ, đếm chữ cái hoặc đặt nội dung vào trong hộp có kích thước nhất định. Nhưng tất cả những giải pháp đó đều vụng về, thiếu linh hoạt và gặp vấn đề riêng.

Việc đếm từ và chữ cái đều yêu cầu bạn sử dụng JavaScript, vốn ít được tối ưu hóa cho trình duyệt hơn so với các giải pháp CSS. Việc đếm từ phụ thuộc rất nhiều vào ngôn ngữ và độ dài của từ, điều này vẫn có thể dẫn đến việc cắt ngắn không đều trong khi việc đếm các chữ cái có thể khiến người dùng bị hỏng từ. Cả hai giải pháp cũng yêu cầu nội dung phải hoàn toàn là văn bản

Ngược lại, đặt nội dung bên trong hộp có kích thước được chỉ định là giải pháp dựa trên CSS. Vấn đề với giải pháp cắt bớt một dòng là nó yêu cầu ngắt dòng văn bản sau một dòng. Giải pháp này tránh quy tắc CSS đó và thay vào đó, tạo một hộp xung quanh nội dung dựa trên khoảng cách và chiều cao dòng của văn bản. Tuy nhiên, giải pháp này rất phù hợp với các thuộc tính phông chữ của nội dung và làm cho nó cực kỳ không linh hoạt.

kẹp dòng CSS

Để giải quyết tất cả những vấn đề này, một quy tắc CSS đã được thêm vào WebKit. -webkit-line-clamp. Nó chấp nhận một giá trị số nguyên và giới hạn nội dung của phần tử được sử dụng trên số dòng đã chỉ định. Yêu cầu để sử dụng tính năng kẹp dây này là phần tử kẹp dây phải có thuộc tính display được đặt thành -webkit-box hoặc -webkit-inline-box và thuộc tính -webkit-box-orient được đặt thành giá trị vertical. Điều đó sẽ trông giống như sau

.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Điều xảy ra là CSS sẽ hiển thị tất cả nội dung, nhưng giới hạn nội dung đó sau số dòng được chỉ định (trong trường hợp này là 3). Ở cuối dòng đó, nó sẽ thêm dấu chấm lửng để biểu thị kẹp dòng. Cuối cùng, bạn sẽ phải thêm quy tắc CSS overflow: hidden để đảm bảo tất cả các dòng khác không hiển thị

Và thế là xong, bây giờ bạn có các phần tử đồng nhất luôn được cắt bớt theo cùng một số lượng dòng. Và tất cả điều này đã được thực hiện thông qua CSS thuần túy

Các thành phần thẻ được triển khai với kẹp dòng cho giao diện người dùng thống nhất

(Hãy dùng thử trong CodeSandbox này)

Điều cuối cùng cần đề cập là hỗ trợ trình duyệt. Hỗ trợ trình duyệt cho các quy tắc CSS tiện dụng này luôn là một trong những nhược điểm lớn nhất của chúng. Mặc dù có rất nhiều quy tắc CSS gọn gàng và hữu ích, nhưng chúng thường bị giới hạn ở một số công cụ trình duyệt web hoặc trình duyệt web nhất định. Điều này gây khó khăn cho việc áp dụng chúng vì chúng chỉ bao gồm các phần của cơ sở người dùng

Trong trường hợp kẹp dòng, đó là quy tắc CSS đã được triển khai cụ thể trong WebKit. Tuy nhiên, tại thời điểm viết bài này, sự hỗ trợ dành cho -webkit-line-clamp đã đến gần như tất cả các trình duyệt chính. Trình duyệt duy nhất không hỗ trợ nó là Internet Explorer, trình duyệt này có thể gây ra sự cố nếu đó là một phần quan trọng trong nhân khẩu học trình duyệt của người dùng của bạn. Tuy nhiên, kẹp dây là một phần trong đó có thể cung cấp hỗ trợ rộng rãi hơn trong tương lai

Tóm lược

Cắt bớt văn bản nhiều dòng là sự cố giao diện người dùng phổ biến gặp phải, thường được sử dụng để làm cho nội dung đồng nhất hơn, tiết kiệm diện tích màn hình hoặc giảm lượng thông tin ít quan trọng hơn trên màn hình cho người dùng

Mặc dù vấn đề tương đương một dòng có thể dễ dàng được giải quyết bằng một vài dòng CSS trực quan, nhưng vấn đề tương tự không áp dụng cho việc cắt bớt văn bản nhiều dòng. Thay vào đó, các nhà phát triển giao diện người dùng phải dùng đến các phương pháp như đếm từ, đếm chữ cái hoặc tự xác định hộp thứ nguyên của nội dung. Cuối cùng, tất cả các phương pháp này đều không tối ưu, không linh hoạt và gặp phải các vấn đề tương ứng.

Nhưng với việc triển khai tính năng kẹp dòng trong WebKit, tất cả các vấn đề về sự cố khắc phục đã được giải quyết. Nó cung cấp cho chúng tôi một bộ quy tắc CSS đơn giản có thể được sử dụng để thực hiện cắt bớt văn bản nhiều dòng thông qua CSS thuần túy. Mặc dù -webkit-line-clamp và các đối tác của nó chưa được hỗ trợ bởi toàn bộ lĩnh vực, nhưng nó đã có sẵn trong hầu hết các trình duyệt chính để bạn sử dụng

Phản ứng hiếm gặp

Bản tin giúp bạn trở thành một nhà phát triển React giỏi hơn bằng cách tập trung vào các chủ đề ít được thảo luận hơn, như thử nghiệm, khả năng đọc, v.v.

Đăng ký để nhận các phiên bản mới nhất qua email

Bằng cách đăng ký, bạn đồng ý với Điều khoản dịch vụ và Chính sách quyền riêng tư của Revue

---

Sau khi tốt nghiệp, sự nghiệp của tôi hoàn toàn tập trung vào việc học hỏi và cải thiện với tư cách là một nhà phát triển. Tôi đã bắt đầu làm việc toàn thời gian với tư cách là nhà phát triển React và tôi sẽ viết blog về mọi thứ mà tôi gặp và học được trong hành trình này. Điều này sẽ bao gồm việc cải thiện kỹ năng giao tiếp trong môi trường kỹ thuật, trở thành nhà phát triển giỏi hơn, cải thiện kỹ năng kỹ thuật về React và JavaScript cũng như thảo luận về các chủ đề liên quan đến nghề nghiệp. Trong tất cả các bài viết của tôi, trọng tâm sẽ là kinh nghiệm cá nhân, học hỏi, khó khăn, giải pháp (nếu có) và cả những sai sót