Việc cắt bớt văn bản nhiều dòng bằng CSS thuần túy có thể được thực hiện, tuy nhiên, nó có một số lưu ý. Có một giải pháp JavaScript có thể lý tưởng trong một số trường hợp Show Cắt bớt văn bản một dòng theo sau bởi dấu chấm lửngĐây là một tình huống rất phổ biến và được sử dụng rộng rãi và nó có triển khai CSS tiêu chuẩn .truncate { width: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }Đoạn mã trên cho kết quả là Càng xa càng tốt. Còn nếu chúng ta muốn giới hạn văn bản của mình trong 2 dòng thì sao? cách CSS. -webkit-line-kẹp cáchTheo MDN, overflow: hidden; display: -webkit-box; or -webkit-inline-box -webkit-line-clamp: 2; -webkit-box-orient: vertical;Đoạn mã trên sẽ cắt ngắn hoặc cắt văn bản thành hai dòng và hiển thị văn bản bị cắt ngắn bằng dấu chấm lửng. Mặc dù là Bản nháp đang hoạt động, nhưng mã này hoạt động trong tất cả các trình duyệt hiện đại ngoại trừ Internet Explorer Tuy nhiên, nó có thể không phải là một giải pháp hoàn hảo trong một số tình huống nhất định. Vấn đề lớn nhất là -webkit-box hoặc -webkit-inline-box. Mặc dù có nội tuyến, nhưng nó luôn hoạt động như một khối Rất khó tìm thông tin về -webkit-box. MDN cung cấp một số thông tin theo Định nghĩa chính thức. Điều quan trọng là đây là một tính năng không chuẩn nhưng đáng ngạc nhiên là tất cả các trình duyệt đều hỗ trợ nó Vấn đề-webkit-line-clamp thực hiện cắt bớt văn bản cho dòng đã cho. Tuy nhiên, để nó hoạt động, nó phụ thuộc vào ba trong số bốn thuộc tính, tôi. e. , (trưng bày. -webkit-box hoặc -webkit-inline-box), -webkit-line-clamp và -webkit-box-orient. 3 đặc tính này là sức mạnh cũng như gót chân Achilles của nó -webkit-box hoặc -webkit-inline-box-webkit-box hoặc -webkit-inline-box hoạt động giống như khối và gây ra sự cố lớn khi được sử dụng với các phần tử nội tuyến khác. Ví dụ: nếu văn bản bị cắt bớt phải được đặt trong dòng với các thành phần khác. Nó sẽ không nội tuyến, ngay cả với -webkit-inline-box Hãy kiểm tra một mã hiển thị dưới đây. Tôi muốn hiển thị tất cả các phần tử dưới dạng nội tuyến, phần tử cuối cùng được nội tuyến và căn phải. tôi muốn thể hiện như Nó cắt bớt văn bản nhưng đã phá vỡ thiết kế của tôi, điều mà tôi không muốn  Mục đầu tiên (trong ảnh chụp màn hình hiển thị ở trên) là mục tôi muốn. Văn bản dòng thứ ba (Mới, R) cũng ở trong dòng nhưng được căn phải. Tôi rất muốn có được kết quả tương tự bằng cách sử dụng -webkit-line-clamp (vì nó rất đơn giản và rõ ràng), tuy nhiên, nó không đáp ứng được mục đích của tôi. Tôi đã phải tìm nơi khác để giải cứu JavaScript (một lần nữa, vị cứu tinh. )Việc triển khai JavaScript khó khăn với một số tham số được xác định trước. Như là
Cách tiếp cận đầu tiên được hiển thị ở đây. Theo tôi, rất khó để biết trước có bao nhiêu từ hoặc ký tự sẽ lấp đầy khu vực nhất định. Vì vậy, tôi đã bỏ ý tưởng này Sử dụng chiều cao của divĐúng. Một div với nội dung có chiều cao. Hầu hết thời gian, chúng tôi có chiều cao nhất quán giữa các mặt hàng. Trong trường hợp của tôi, tôi phải hiển thị nhiều mục sử dụng cùng một bố cục. Điều đó làm cho nhiệm vụ của tôi dễ dàng hơn rất nhiều
Tôi thấy rằng chiều cao của div mà văn bản phải được cắt ngắn là '24px', khi được hiển thị trên một dòng. Đối với văn bản 2 dòng, nó là 48px. Bây giờ, nếu chiều cao của div lớn hơn 48px, điều đó có nghĩa là, văn bản của div này phải bị cắt bớt (tôi chỉ muốn hiển thị 2 dòng văn bản)
|
