CSS ba chấm đa dòng

CSS không có thuộc tính cho dấu chấm lửng trên văn bản nhiều dòng, nhưng chúng ta vẫn có thể đạt được kết quả mong muốn. Tuy nhiên, trước tiên chúng ta hãy xem cách tạo dấu ba chấm thành văn bản một dòng

Tạo dấu ba chấm thành văn bản một dòng

Để tạo Ellipsis, chúng ta cần sử dụng thuộc tính text-overflow với giá trị Ellipsis i. e −

text-overflow: ellipsis; 

Ví dụ

Bây giờ chúng ta hãy xem ví dụ hoàn chỉnh -

   


   Demo Heading
   
This is a demo text

đầu ra

Tạo dấu ba chấm thành văn bản nhiều dòng

Để cho phép dấu ba chấm thành văn bản nhiều dòng, trước tiên hãy đặt div bằng thuộc tính CSS sau. Chiều cao được đặt ở đây là cho toàn bộ đoạn văn. Phần tràn được ẩn để tránh bất kỳ phần tràn nào sau chiều cao đã chỉ định của đoạn văn -

.mydiv {
   position: relative;
   display: block;
   width: 28em;
   height: calc(2em + 5px);
   overflow: hidden;
   white-space: normal;
}

Sau đó, khoảng mytext được đặt với thuộc tính ngắt từ. Thuộc tính ngắt từ chỉ ra cách các từ sẽ ngắt khi đi đến cuối dòng. Chiều cao tối đa cũng được đặt -

Cách đây một thời gian, tôi đã viết một bài viết về cách sử dụng thuộc tính CSS text-overflow để thêm dấu chấm lửng (3 dấu chấm) khi cắt bớt các dòng văn bản dài

Cách tiếp cận đó chỉ hiệu quả với một dòng nội dung. Nhưng làm thế nào chúng ta có thể nhận được cùng một kết quả trong khi hiển thị nhiều dòng?

Giả sử chúng ta có đoạn html sau

  Lorem Ipsum is simply dummy text
  of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard
  dummy text ever since the 1500s, when an
  unknown printer took a galley of type and 
  scrambled it to make a type specimen book. 
  It has survived not only five centuries, but also 
  the leap into electronic typesetting, 
  remaining essentially unchanged.

Đây là cách lớn hơn chỉ hai dòng, phải không?

.truncate-to-2-lines {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Chìa khóa ở đây là thuộc tính -webkit-line-clamp. Nó sẽ chỉ hoạt động khi kết hợp với display: -webkit-box hoặc display:-webkit-inline-box và -webkit-box-orient:vertical

Sử dụng nó, chúng ta có thể cắt bớt văn bản thành một số dòng cụ thể

Tạo codepen này để kiểm tra phần cắt ngắn bằng dấu chấm lửng trên nhiều dòng

Hỗ trợ cho -webkit-line-clamp khá tốt, có sẵn trong tất cả các trình duyệt chính

Tôi hy vọng bạn thích bài viết này và nếu bạn muốn nhận thêm các bài viết về React và phát triển giao diện người dùng, bạn luôn có thể đăng ký danh sách email của tôi

Thủ thuật trong bài viết này vẫn khá gọn gàng và thông minh, nhưng có lẽ đây là cách tốt nhất để bạn thực hiện

Cắt bớt một dòng văn bản nếu khá đơn giản. Cắt bớt nhiều dòng khó hơn một chút. Chỉ sử dụng CSS (không có JavaScript hoặc nhảy phía máy chủ) là tốt cho sự đơn giản. Gần đây nó đã trở nên dễ dàng hơn một chút vì Firefox (kể từ phiên bản 68) đã bắt đầu hỗ trợ , điều này giúp trình duyệt hỗ trợ khá OK

Tuy nhiên, có một cách khác, rất thông minh và tôi gọi đó là thủ thuật CSS chân chính. Bằng cách nào đó, chúng tôi đã không trình bày nó đúng cách trong bài viết chuẩn của chúng tôi về kẹp dòng, vì vậy tôi sẽ trình bày nó ở đây sau đó thêm nó vào bài đăng đó. Lần đầu tiên tôi nhìn thấy thủ thuật này trên blog Mobify hiện đã chết và gần đây được Natalia Onischuk trình bày trên HackingUI

Thủ thuật sử dụng chiều cao của dòng để đo

Đây là một phần quan trọng của mánh khóe. Hãy tưởng tượng một phần tử có line-height của 1.4rem và bạn muốn đảm bảo rằng nó chỉ hiển thị tối đa ba dòng văn bản. Nếu bạn đặt max-height thành 1.4rem * 3, bạn đã hoàn thành

Tôi không phải là người hâm mộ cuồng nhiệt nhất thế giới của line-height thống nhất, nhưng than ôi, ở đây cần phải tính toán. Tôi cũng không phải là người thích đặt đi đặt lại nhiều lần trên các phần tử, vì vậy, hãy đặt một biến mà chúng ta có thể sử dụng sau này, sau đó sử dụng biến đó để đặt line-height toàn cầu

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

Đặt chiều cao tối đa đó

Việc cắt ngắn xảy ra như thế này

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

Bạn thực sự có thể để nó như thế này. Điều đó có thể đủ tốt nếu bạn không quan tâm đến dấu chấm lửng

Phần còn lại của thủ thuật xuất hiện khi bạn muốn hiển thị nội dung dấu chấm lửng đó

Dấu chấm lửng (“…”) biểu thị rằng văn bản đã bị cắt ngắn và tiếp tục dài hơn so với nội dung hiển thị. Sử dụng nó có lẽ là một cách thực hành khá tốt khi cắt bớt văn bản để nội dung không bị kết thúc đột ngột, khó xử. (Chà, bản thân nội dung có thể hơi khó xử, nhưng này, bạn đã thử. )

Nếu bạn đặt

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

1 trên phần tử, bạn hoàn toàn có thể đặt dấu chấm lửng ở góc dưới cùng bên phải

________số 8_______

Tôi đã rất muốn, thay vì đặt đáy, đặt trên cùng và sử dụng

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

2. Tôi nghĩ rằng bạn cũng có thể đặt dấu chấm lửng vào đúng điểm bạn cần. Nếu văn bản quá ngắn, tràn ẩn sẽ cắt nó đi. Vấn đề với điều đó là nó không giải quyết được vấn đề "các dòng tối đa chính xác". Dấu chấm lửng sẽ hiển thị khi văn bản khớp với các dòng tối đa — không chỉ khi nó vượt quá khoảng trống đó

Chúng ta sẽ phải trở nên phức tạp hơn

Lưu ý rằng điều "cài đặt nội dung ở dưới cùng bên phải" này khá cụ thể đối với các ngôn ngữ viết từ trái sang phải. Tôi sẽ tạo bản demo với các thuộc tính logic CSS như

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

3 thay vì

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

4 với hy vọng làm cho nó thân thiện hơn với các ngôn ngữ và kịch bản dòng chảy khác nhau

Một hạn chế khác là dấu chấm lửng không tự gắn vào từ cuối cùng vì nó được đặt hoàn toàn. Chúng tôi cũng sẽ không sửa nó

Hãy che dấu chấm lửng khi văn bản quá ngắn

Đây là phần thứ hai của thủ thuật. Nếu chúng ta luôn định vị tuyệt đối ở cuối/cuối văn bản, điều đó tốt. Nhưng nếu văn bản chính xác bằng giá trị

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

5 hoặc ít hơn, chúng tôi muốn ẩn nó

Mẹo ở đây là tạo một cái hộp nhỏ có cùng nền với cái đằng sau nó và đặt nó lên trên dấu chấm lửng để che nó đi. Chúng ta có thể làm điều đó với phần tử giả khác

.truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0; /* note: not using bottom */
  width: 1rem;
  height: 1rem;
  background: white;
}

Một thủ thuật khác mà chúng tôi đang sử dụng ở đây là không đặt thuộc tính dưới cùng (

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

6). Điều này đặt hộp ở dưới cùng của nội dung chứ không phải dưới cùng của cha mẹ tương đối, điều này rất hữu ích

Để tôi tô màu đỏ cho các hộp để bạn có thể thấy chúng trong ba ví dụ khác nhau này

Ví dụ trên cùng có nhiều hơn ba dòng, vì vậy chúng ta thấy dấu chấm lửng. Ví dụ thứ hai chỉ có hai dòng, vì vậy hộp màu đỏ cho biết dấu chấm lửng sẽ bị che đi (nhưng hãy tưởng tượng thay vào đó là hộp màu trắng). Ví dụ cuối cùng cho thấy rằng hệ thống này hoạt động ngay cả khi nội dung hoàn toàn giống với giá trị của

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

5

Thử nghiệm

Dự phòng nhúng CodePen

Tôi đã từng muốn sử dụng các thuộc tính logic CSS ở đây vì hỗ trợ trình duyệt đã trở nên khá tốt. Nếu bạn đang hỗ trợ bất kỳ phiên bản IE nào, bạn sẽ phải sử dụng

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

8 và

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

4

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari8966No8915

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari109< . 0-15. 110910915.0-15.1

Mối quan tâm về khả năng tiếp cận

Joseph Scherben đã viết thư để đề cập

Nếu các phần tử chứa các phần tử tương tác và phần tràn bị ẩn (không cuộn) thì các phần tử đó có thể được đặt tiêu điểm nhưng không hiển thị trong trang web. Điều này có thể khiến người dùng bàn phím/thiết bị hỗ trợ mất vị trí trong nội dung đã cắt bị ẩn

Làm cách nào để tạo dấu chấm lửng trong CSS?

Để cắt bớt phần chuyển tiếp giữa các ký tự, bạn có thể chỉ định tràn văn bản dưới dạng một chuỗi trống, nếu điều đó được hỗ trợ trong các trình duyệt mục tiêu của bạn. tràn văn bản. ''; . Giá trị từ khóa này sẽ hiển thị dấu chấm lửng ( '…' , U+2026 HORIZONTAL ELLIPSIS ) để biểu thị văn bản được cắt bớt.

Làm cách nào để cắt bớt văn bản trong CSS?

Thuộc tính CSS . Khoảng trắng. nowrap; . Thuộc tính này buộc các từ thành một đường thẳng và không xuống dòng tiếp theo.