Hướng dẫn truncate text css 2 lines - cắt bớt văn bản css 2 dòng

Bạn muốn các dòng X của văn bản. Bất cứ điều gì sau đó: duyên dáng cắt đứt. Đó là dòng chữ của bạn và đó là một mong muốn hoàn toàn hợp pháp. 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 yếu tố chứa văn bản đó, cũng như đạt được một số sự hài hòa thẩm mỹ đối xứng.

Có một vài cách để hoàn thành nó, không ai trong số họ ngoạn mục.

Trong trường hợp lời 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 chính xác ba dòng trong một container. Như thế này:

Trong tất cả các ví dụ này, hãy để cho giả sử chúng ta có một mô -đun trực tuyến.

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

Cách chuẩn hóa

Tôi đã từng gọi đây là WebKit Flexbox Webkit Way Way Way Way, nhưng trong một bước ngoặt kỳ lạ, thông số kỹ thuật hiện bao gồm đây là một phần của mô -đun tràn, Flexbox cũ và tất cả. Và, Firefox đã thực hiện nó như thế. Và với edge-gone-crom, 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 những gì chúng ta cần. Ở đây, một sân chơi để chơi với nó:

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

Cách phai phai

Rễ của kỹ thuật này chỉ là thiết lập chiều cao của mô -đun một cách có thể dự đoán được. Hãy nói rằng bạn đã đặt line-height thành 1.2em. Nếu chúng ta muốn phơi bày ba dòng văn bản, chúng ta chỉ có thể tạo chiều cao của container 3.6em (1.2EM × 3). Các tràn ẩn sẽ che giấu phần còn lại.

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

Để làm mờ đi dòng cuối cùng, chúng tôi tạo một hộp (một yếu tố giả sẽ hoạt động tuyệt vời) và phủ một gradient màu trong suốt đến trong lớp trên cùng. Làm cho nó gần như rộng như container là tốt nhất trong trường hợp dòng cuối cùng là ngắn. Bởi vì chúng ta biết line-height, chúng ta có thể làm cho hộp giả phần tử chính xác một dòng cao.

.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%);
}

Cách thức hoạt động opera

Opera là công cụ kết xuất riêng của nó, không còn tồn tại. Chỉ cần để 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 Opera Opera trước Blink) vì vậy điều này đặc biệt hữu ích. Có lẽ nó vẫn có thể thông báo cho một triển khai trong tương lai mặc dù.

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

Kẹp.js Way

Trường hợp có ý chí có một cách (với JavaScript). Tôi nghĩ rằng một câu nói. Joseph J. Schmitt có một thứ javaScript không có thư viện tuyệt vời gọi là CLAMP.js để thực hiện điều này theo cách trình duyệt chéo.

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

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

Hãy chắc chắn rằng bạn nhắm mục tiêu phần tử với văn bản trực tiếp bên trong nó. Ban đầu tôi đã thử đặt ID vào mô -đun, hoạt động trong Chrome/Safari, nhưng thất bại trong Firefox. Đặt nó vào & nbsp; ________ 11 & nbsp; làm cho nó hoạt động trong cả hai (thx & nbsp; merri).

The Hide Overflow & Place Ellipsis Pure CSS Way

Bí quyết là đặt

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

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

.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow::before {
  position: absolute;
  content: "...";
  inset-block-end: 0; /* "bottom" */
  inset-inline-end: 0; /* "right" */
}
.truncate-overflow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0; /* "right" */
  width: 1rem;
  height: 1rem;
  background: white;
}

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

Các bản demo

Cập nhật: Những cách tốt hơn!

• Có một cách đặc biệt thông minh tất cả CSS để thực hiện việc này được đăng trên bản cập nhật blog Mobify: Liên kết bị xóa, Blog Dead, được thêm vào kỹ thuật ở đây.Update: removed link, dead blog, added in the technique here.
• Vesa Piittinen đã tạo ra một phương pháp thay thế để kẹp.
  “Unlike Clamp.js it retains all the text within the clamped element and uses

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

  4 to do the magic.”
• FT Labs cũng đã tạo ra một plugin JavaScript để thực hiện công việc. Thật tốt khi bạn không phải chỉ định số lượng dòng, điều đó chỉ xảy ra khi văn bản tràn vào container, vì vậy quyết định thiết kế ở trong CSS.
• Phân biệt: Một plugin jquery nhỏ để cắt ngắn nhiều dòng văn bản.

Những ví dụ này đã được thêm vào bút chính.

Ngoài ra còn có cạo từ Dollarshaveclub:

Làm cách nào để cắt văn bản sau hai dòng?

Làm thế nào để bạn cắt các dòng trong CSS?

Làm thế nào để bạn chia một từ với hai dòng trong CSS?

Làm thế nào để bạn tạo một văn bản đa dòng elip trong CSS?