Mã ba dòng trong css

Hiệu ứng của

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

1 bị giới hạn bởi độ dài và nội dung của dòng văn bản đầu tiên trong phần tử. Độ dài của dòng đầu tiên phụ thuộc vào nhiều yếu tố, bao gồm chiều rộng của phần tử, chiều rộng của tài liệu và cỡ chữ của văn bản.

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

1 không có tác dụng khi phần tử con đầu tiên của phần tử, sẽ là phần đầu tiên của dòng đầu tiên, là phần tử cấp khối nội tuyến, chẳng hạn như bảng nội tuyến

Ghi chú. Bộ chọn cấp 3 đã giới thiệu ký hiệu dấu hai chấm (

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

3) để phân biệt các lớp giả với các phần tử giả, là một dấu hai chấm

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

4. Các trình duyệt chấp nhận cả

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

1 và

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

6, được giới thiệu trong CSS2

Vì vậy, nhà thiết kế của bạn đã yêu cầu bạn thêm ba dấu chấm ở cuối khi văn bản không vừa và bạn không biết làm thế nào để làm điều đó?

Đừng lo lắng, nó cực kỳ đơn giản với CSS

Nhân tiện, ba dấu chấm ở cuối đó được gọi là dấu chấm lửng

Dấu chấm lửng một dòng

Sử dụng

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

7 để tự động cắt bớt văn bản khi nó tràn vào vùng chứa và thêm dấu ba chấm ở cuối

Phần tử cần được thay đổi kích thước và văn bản phải nằm trong một dòng để dấu chấm lửng hiển thị, vì vậy đây là tất cả 3 dòng CSS bạn cần

.ellipsis {
  text-overflow: ellipsis; /* enables ellipsis */
  white-space: nowrap; /* keeps the text in a single line */
  overflow: hidden; /* keeps the element from overflowing its parent */
}

Dấu chấm lửng một dòng sử dụng CSS

📣

Vùng chứa chính thường cho phép tràn nội dung của nó, làm cho dấu chấm lửng không hiển thị. Thêm

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

8 vào vùng chứa chính để khắc phục điều đó

Ví dụ về dấu chấm lửng một dòng trong thực tế

dấu chấm lửng nhiều dòng

Bạn sẽ sớm nhận ra rằng

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

7 không hoạt động khi văn bản kéo dài đến một dòng thừa

Để cắt bớt văn bản nhiều dòng và thêm dấu chấm lửng ở cuối dòng cuối cùng, hãy sử dụng mô hình hộp

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

0 thử nghiệm (đừng lo lắng, mô hình này được hỗ trợ trong tất cả các trình duyệt chính)

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

Dấu chấm lửng nhiều dòng sử dụng CSS

Kiểm soát số lượng dòng hiển thị với

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

1. Điều quan trọng là để ngắt dòng văn bản bằng cách đặt thuộc tính

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

2 thành

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

3 hoặc

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

4

📣

Tương tự như trước đây, vùng chứa chính cần cắt các phần tử con của nó. Thêm

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

8 vào phần tử gốc

Ví dụ về dấu chấm lửng nhiều dòng trong thực tế

Phần kết luận

Việc cắt bớt văn bản tràn ngập và thêm dấu chấm lửng ở cuối một dòng đơn giản là chuyện nhỏ. Thêm dấu chấm lửng cho văn bản nhiều dòng phức tạp hơn một chút, vì vậy bài đăng này sẽ giúp ích cho bạn

Bạn có thể tìm thấy các ví dụ mã cho bài viết này trên GitHub của tôi. https. //github. com/vincaslt/twitter-code/tree/main/src/ellipsis

Nếu bạn có nhu cầu phức tạp hơn những gì CSS có thể đạt được, hãy cân nhắc sử dụng thư viện JavaScript của bên thứ 3. Nếu bạn đang sử dụng phản ứng, cái này tốt

GitHub - xiaody/reac-lines-ellipsis. Thành phần dấu chấm lửng nhiều dòng đơn giản cho React. JS

Thành phần dấu chấm lửng nhiều dòng đơn giản cho React. JS. Đóng góp cho sự phát triển của xiaody/Reac-lines-ellipsis bằng cách tạo một tài khoản trên GitHub

GitHubxiaody

Vì bạn đang học các thủ thuật CSS, tại sao không xem qua hướng dẫn CSS thực tế của tôi?

Hướng dẫn CSS thực tế dành cho nhà phát triển bận rộn

Tại sao phải lãng phí thời gian để ghi nhớ những thứ bạn sẽ không bao giờ sử dụng?

Bạn muốn X dòng văn bản. Bất cứ điều gì sau đó. duyên dáng cắt đứt. Đó là “kẹp hàng” và đó là một mong muốn hoàn toàn chính đáng. Khi bạn có thể tin tưởng vào văn bản là một số dòng nhất định, bạn có thể tạo các lưới mạnh hơn và đáng tin cậy hơn từ các thành phần chứa văn bản đó, cũng như đạt được một số sự hài hòa về mặt thẩm mỹ đối xứng

Có một vài cách để hoàn thành nó, không có cách nào ngoạn mục

Trong trường hợp giải thích đó không rõ ràng, hãy tưởng tượng bạn có một số HTML như thế này

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Và bạn muốn giới hạn nó ở đúng ba dòng trong một vùng chứa. Như thế này

Trong tất cả các ví dụ này, giả sử chúng ta có một “mô-đun”

.module {
  width: 250px;
  overflow: hidden;
}

Cách tiêu chuẩn hóa

Tôi đã từng gọi đây là "cách thức flexbox kỳ lạ của WebKit", nhưng theo một cách kỳ lạ hơn, thông số kỹ thuật hiện bao gồm điều này như một phần của mô-đun tràn, flexbox cũ và tất cả. Và, Firefox đã triển khai nó như thế. Và với Edge-gone-Chromium, kỹ thuật kỳ lạ này đã trở nên hữu ích hơn rất nhiều thay vì ít hơn

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

Mặc dù cú pháp kỳ lạ, điều này thật tuyệt vời và chính xác là những gì chúng ta cần. Đây là một sân chơi để chơi với nó

Dự phòng nhúng CodePen

Công bằng mà nói, nó thực sự kỳ lạ. Tại sao nó cần phải là một thứ flexbox (phiên bản cũ ở đó)? . Và nó cực kỳ mong manh. Giả sử bạn muốn mô-đun (hoặc đoạn văn) có một số phần đệm. Bạn không thể vì phần đệm sẽ làm lộ thêm các dòng. Đó là những gì chúng tôi nhận được với các thuộc tính ban đầu chưa được chuẩn hóa một nửa

Con đường mờ dần

Cốt lõi của kỹ thuật này chỉ là thiết lập chiều cao của mô-đun theo cách có thể dự đoán được. Giả sử bạn đặt

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

6 thành

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

7. Nếu chúng ta muốn hiển thị ba dòng văn bản, chúng ta chỉ cần đặt chiều cao của vùng chứa là

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

8 (1. 2em × 3). Phần tràn ẩn sẽ ẩn phần còn lại

Nhưng có thể hơi khó xử khi chỉ cắt văn bản như vậy. Lý tưởng nhất là chúng tôi sẽ thêm dấu chấm lửng, nhưng chúng tôi không thể định vị chúng một cách chắc chắn. Vì vậy, thay vào đó, chúng tôi sẽ làm mờ dần văn bản để đạt được cùng một kiểu giao tiếp (“còn nữa…”)

Để làm mờ dòng cuối cùng, chúng tôi tạo một hộp (phần tử giả sẽ hoạt động tốt) và phủ một dải màu trong suốt sang màu nền lên trên cùng. Làm cho nó rộng gần bằng vùng chứa là tốt nhất trong trường hợp dòng cuối cùng ngắn. Bởi vì chúng tôi biết

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

6, chúng tôi có thể làm cho hộp phần tử giả cao chính xác một dòng

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade::after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Con đường tràn Opera

Opera là công cụ kết xuất của riêng nó, đã không còn tồn tại từ lâu. Chỉ để lại điều này vì lý do lịch sử

Giống như WebKit, Opera có cách riêng để xử lý việc này. Họ áp dụng dấu chấm lửng trên dòng bạn muốn. Tất nhiên, đồng hồ đang tích tắc cho Presto (công cụ kết xuất trước Blink của Opera), vì vậy điều này không đặc biệt hữu ích. Có lẽ nó vẫn có thể thông báo cho việc triển khai trong tương lai mặc dù

.last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-ellipsis-lastline;
}

cái kẹp. cách js

Có ý chí sẽ có cách (với JavaScript). Tôi nghĩ đó là một câu nói. Joseph J. Schmitt có một thứ JavaScript không có thư viện tuyệt vời được gọi là Kẹp. js để thực hiện điều này theo cách đa trình duyệt

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

Đảm bảo bạn nhắm mục tiêu phần tử có văn bản ngay bên trong phần tử đó. Ban đầu, tôi đã thử đặt ID trên mô-đun hoạt động trong Chrome/Safari nhưng không thành công trong Firefox. Đưa nó vào 

.module {
  width: 250px;
  overflow: hidden;
}

1 làm cho nó hoạt động ở cả hai (Thx Merri)

Cách ẩn dấu tràn & đặt dấu chấm lửng Pure CSS

Mẹo nhỏ là đặt

.module {
  width: 250px;
  overflow: hidden;
}

2 bằng số dòng tối đa nhân với

  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

6

.multiline-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */
  white-space: pre-wrap; /* let the text wrap preserving spaces */
}

0

Phần còn lại là đặt dấu chấm lửng “…” ở cuối dòng nhưng chỉ khi văn bản vượt quá số dòng tối đa

Làm cách nào để đặt 3 div trong một hàng?

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