Hướng dẫn css truncate text 2 lines - css cắt bớt văn bản 2 dòng
Có một giải pháp để thêm dấu chấm lửng trên dòng cuối cùng bên trong một div có chiều cao chất lỏng (20%)? Show
Tôi đã tìm thấy hàm 4 trong CSS, nhưng trong trường hợp của tôi, số dòng sẽ phụ thuộc vào kích thước cửa sổ.
Tôi có jsfiddle này để minh họa vấn đề. https://jsfiddle.net/96knodm6/
Hỏi ngày 10 tháng 10 năm 2015 lúc 19:18Oct 10, 2015 at 19:18
Bruno Landowskibruno LandowskiBruno Landowski 3.1992 Huy hiệu vàng16 Huy hiệu bạc24 Huy hiệu đồng2 gold badges16 silver badges24 bronze badges 2 Tăng -webkit-line-kẹp: 4; Để tăng số lượng dòng:-webkit-line-clamp: 4; to increase the number of lines:
Line Kẹp là một CSS độc quyền và không có giấy tờ (WebKit): https://caniuse.com/#feat=css-line-clamp, vì vậy nó hiện chỉ hoạt động trên một vài trình duyệt. Đã loại bỏ sao chép 'Hiển thị' thuộc tính + Đã xóa không cần thiết 'Văn bản-Overflow: Ellipsis'.
Rob Bednark 24.1K21 Huy hiệu vàng78 Huy hiệu bạc119 Huy hiệu đồng21 gold badges78 silver badges119 bronze badges Đã trả lời ngày 14 tháng 12 năm 2016 lúc 7:46Dec 14, 2016 at 7:46
15 Nếu bạn muốn áp dụng Ellipsis (...) cho một dòng văn bản duy nhất, CSS sẽ giúp điều đó dễ dàng với thuộc tính 5. Nó vẫn còn một chút khó khăn (do tất cả các yêu cầu - xem bên dưới), nhưng 5 làm cho nó có thể và đáng tin cậy.Tuy nhiên, nếu bạn muốn sử dụng dấu chấm lửng trên văn bản đa dòng - như trường hợp ở đây - thì đừng mong đợi có bất kỳ niềm vui nào. CSS không có phương pháp tiêu chuẩn để thực hiện việc này và các cách giải quyết bị ảnh hưởng và bỏ lỡ. Ellipsis cho văn bản dòng đơnVới 5, Ellipsis có thể được áp dụng cho một dòng văn bản duy nhất. Các yêu cầu CSS sau đây phải được đáp ứng:
Vì vậy, điều này sẽ hoạt động:
Phiên bản jsfiddle Nhưng, hãy thử loại bỏ 8 hoặc để mặc định 2 thành 3 hoặc loại bỏ 1 hoặc sử dụng một cái gì đó khác ngoài phần tử container khối và, Ellipsis không thành công.Một bước đi lớn ở đây: 0 không có tác dụng đối với văn bản đa dòng. (Yêu cầu 1 một mình loại bỏ khả năng đó.)Phiên bản jsfiddle Nhưng, hãy thử loại bỏLorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem. 8 hoặc để mặc định p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; }2 thành p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; }3 hoặc loại bỏ p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; }1 hoặc sử dụng một cái gì đó khác ngoài phần tử container khối và, Ellipsis không thành công.Một bước đi lớn ở đây: 0 không có tác dụng đối với văn bản đa dòng. (Yêu cầu 1 một mình loại bỏ khả năng đó.)
CSS Ellipsis: Cách quản lý dấu chấm lửng đa dòng trong CSS thuần túy
Một giải pháp CSS thuần túy để cắt ngắn văn bản đa dòng Liên kết Mobify ở trên đã bị xóa và bây giờ tham chiếu một bản sao lưu trữ.org, nhưng dường như được thực hiện trong codepen này.4 gold badges39 silver badges43 bronze badges MatthOct 11, 2015 at 2:50
5.9734 Huy hiệu vàng39 Huy hiệu bạc43 Huy hiệu đồngMichael Benjamin Đã trả lời ngày 11 tháng 10 năm 2015 lúc 2:5095 gold badges541 silver badges664 bronze badges 7
Michael Benjaminmichael BenjaminJun 10, 2019 at 8:38
3 324K95 Huy hiệu vàng541 Huy hiệu bạc664 Huy hiệu Đồng
Đã trả lời ngày 10 tháng 6 năm 2019 lúc 8:38Mar 16, 2017 at 12:16
Vui lòng kiểm tra CSS này để biết dấu chấm lửng sang văn bản nhiều dòngSawan mishra Đã trả lời ngày 16 tháng 3 năm 2017 lúc 12:161 gold badge8 silver badges13 bronze badges 8 Sawan Mishrasawan Mishra 06911 Huy hiệu vàng8 Huy hiệu bạc13 Huy hiệu đồng Tôi đã xem xét cách YouTube giải quyết nó trên trang chủ của họ và đơn giản hóa nó: Điều này sẽ cho phép 2 dòng mã và sau đó nối một dấu chấm lửng.Feb 8, 2019 at 17:10
1
Gist: https://gist.github.com/eddybrando/386D3350C0B794EA87A2082BF4AB014B Đã trả lời ngày 8 tháng 2 năm 2019 lúc 17:10 Cuối cùng tôi đã tìm thấy một giải pháp để làm những gì tôi muốn. Như 2 một đoạn và 3 trình bao bọc. Nếu bạn muốn áp dụng dấu chấm lửng vào 2 tùy thuộc vào chiều cao 3 (cũng phụ thuộc vào chiều cao cửa sổ), bạn cần phải có 6 của 3, 8 của 2 và sau đó 0 để tìm số lượng sau đó.Điều duy nhất là 8 nên được khai báo trong tệp CSS. 1 2 3Kiểm tra mã sau. Nếu bạn thay đổi chiều cao của cửa sổ, 1 sẽ thay đổi. Có thể là tuyệt vời để tạo ra một trình cắm nhằm mục đích làm điều đó.Dec 14, 2016 at 13:45
Bruno Landowskibruno LandowskiBruno Landowski 3.1992 Huy hiệu vàng16 Huy hiệu bạc24 Huy hiệu đồng2 gold badges16 silver badges24 bronze badges 1 JSfiddle Đã trả lời ngày 14 tháng 12 năm 2016 lúc 13:45 HTML: Tôi vừa chơi xung quanh một chút với khái niệm này. Về cơ bản, nếu bạn ổn với khả năng có một pixel hoặc bị cắt khỏi nhân vật cuối cùng của bạn, thì đây là một giải pháp CSS và HTML thuần túy:CSS: 5Cách thức hoạt động này là hoàn toàn định vị một div bên dưới vùng có thể xem được của một chế độ xem. Chúng tôi muốn div bù vào vùng có thể nhìn thấy khi nội dung của chúng tôi phát triển. Nếu nội dung phát triển quá nhiều, div của chúng tôi sẽ bù quá cao, do đó, giới hạn độ cao mà nội dung của chúng tôi có thể phát triển. 4Tôi đã thử nghiệm điều này trong Chrome, FF, Safari và IE 11. EDIT: Tôi đoán một điều mà điều này áp đặt là Word-break: break-all vì nếu không thì nội dung sẽ không mở rộng đến cuối chế độ xem. :( Đã trả lời ngày 12 tháng 7 năm 2016 lúc 18:21Jul 12, 2016 at 18:21
puopgpuopgpuopg 5537 Huy hiệu bạc17 Huy hiệu đồng7 silver badges17 bronze badges 2 Người đàn ông này có giải pháp tốt nhất. Chỉ CSS: 6
Lỗi 4.4729 Huy hiệu vàng32 Huy hiệu bạc41 Huy hiệu đồng9 gold badges32 silver badges41 bronze badges Đã trả lời ngày 3 tháng 4 năm 2017 lúc 13:50Apr 3, 2017 at 13:50
2
Thật không may, không có tình trạng hiện tại trong CSS. Kết xuất Ellipsis có điều kiện tiên quyết 4 có nghĩa là hiệu quả: Ellipsis chỉ được vẽ trên các thùng chứa văn bản dòng đơn.Đã trả lời ngày 11 tháng 10 năm 2015 lúc 3:34Oct 11, 2015 at 3:34
c-smilec-smilec-smile 26.2k7 Huy hiệu vàng57 Huy hiệu bạc83 Huy hiệu Đồng7 gold badges57 silver badges83 bronze badges 1 Vui lòng kiểm tra mã dưới đây cho thủ thuật CSS thuần túy với căn chỉnh thích hợp hỗ trợ cho tất cả các trình duyệt 7 8
Greedo 3.4001 Huy hiệu vàng12 Huy hiệu bạc27 Huy hiệu đồng1 gold badge12 silver badges27 bronze badges Đã trả lời ngày 2 tháng 3 năm 2019 lúc 12:01Mar 2, 2019 at 12:01
GopalgopalGopal 1.96721 Huy hiệu bạc17 Huy hiệu đồng21 silver badges17 bronze badges Tôi đã đưa ra giải pháp của riêng mình cho việc này: 9
Tao 75.3K14 Huy hiệu vàng106 Huy hiệu bạc137 Huy hiệu đồng14 gold badges106 silver badges137 bronze badges Đã trả lời ngày 18 tháng 4 năm 2017 lúc 17:01Apr 18, 2017 at 17:01
Có thể điều này có thể giúp các bạn. Các hình elip nhiều dòng với công cụ di chuột. https://codepen.io/anugraha123/pen/wobdob 0
Badiya 2.21912 Huy hiệu bạc23 Huy hiệu đồng12 silver badges23 bronze badges Đã trả lời ngày 18 tháng 7 năm 2017 lúc 9:21Jul 18, 2017 at 9:21
0 1Đã trả lời ngày 20 tháng 2 năm 2019 lúc 9:06Feb 20, 2019 at 9:06
Sau nhiều lần cố gắng, cuối cùng tôi đã kết thúc với một JS / CSS hỗn hợp để xử lý các dòng tràn đa dòng và đơn. Mã CSS3: 2Và tôi chỉ cần kiểm tra bằng mã JS để tràn trên các div, như thế này: 3Ví dụ sử dụng trong HTML: 4Đã trả lời ngày 24 tháng 3 năm 2016 lúc 9:40Mar 24, 2016 at 9:40
FabianfabianFabian 1331 Huy hiệu bạc8 Huy hiệu đồng1 silver badge8 bronze badges Vâng, bạn có thể sử dụng chức năng kẹp dòng trong CSS3. 5Hãy chắc chắn rằng bạn thay đổi các cài đặt như bạn của riêng bạn. Đã trả lời ngày 16 tháng 11 năm 2016 lúc 15:26Nov 16, 2016 at 15:26
Đối với các CSS xấu không hỗ trợ kẹp đa dòng trình duyệt chéo, chỉ có WebKit dường như đang đẩy nó. Bạn có thể thử và sử dụng thư viện Ellipsis JavaScript đơn giản như hình elip trên GitHub, mã nguồn rất sạch sẽ và nhỏ, vì vậy nếu bạn cần thực hiện bất kỳ thay đổi bổ sung nào thì điều đó sẽ khá dễ dàng. https://github.com/Xela101/Ellipsity Đã trả lời ngày 7 tháng 6 năm 2017 lúc 23:47Jun 7, 2017 at 23:47
XelaxelaXela 2.3001 Huy hiệu vàng16 Huy hiệu bạc31 Huy hiệu đồng1 gold badge16 silver badges31 bronze badges 6Đã trả lời ngày 5 tháng 12 năm 2017 lúc 21:25Dec 5, 2017 at 21:25
1 7Hoặc chúng ta có thể hạn chế các dòng bằng cách sử dụng và chiều cao và tràn. Đã trả lời ngày 23 tháng 5 năm 2018 lúc 6:22May 23, 2018 at 6:22
Sau khi tìm kiếm trên internet và thử rất nhiều tùy chọn này, cách duy nhất để đảm bảo rằng nó được bao phủ chính xác với sự hỗ trợ cho i.e là thông qua JavaScript, tôi đã tạo một chức năng vòng lặp để xem qua các mục đăng yêu cầu cắt giảm đa dòng. *Lưu ý tôi đã sử dụng jQuery và yêu cầu lớp Post__items của bạn có chiều cao tối đa cố định. 8Đã trả lời ngày 2 tháng 3 năm 2018 lúc 5:08Mar 2, 2018 at 5:08
PaddypaddyPaddy 7622 Huy hiệu vàng11 Huy hiệu bạc27 Huy hiệu đồng2 gold badges11 silver badges27 bronze badges Nếu bạn đang sử dụng JavaScript, có lẽ bạn có thể làm một cái gì đó như dưới đây. Tuy nhiên, điều này không tính đến chiều cao của container ... 9Đã trả lời ngày 19 tháng 5 năm 2019 lúc 12:13May 19, 2019 at 12:13
Fujiokanoby FujiokaNoby Fujioka 1.6091 Huy hiệu vàng10 Huy hiệu bạc15 Huy hiệu đồng1 gold badge10 silver badges15 bronze badges Giải pháp của tôi phù hợp với tôi đối với Ellipsis đa dòng: 0
Pang 9.264146 Huy hiệu vàng85 Huy hiệu bạc120 Huy hiệu đồng146 gold badges85 silver badges120 bronze badges Đã trả lời ngày 8 tháng 10 năm 2018 lúc 2:18Oct 8, 2018 at 2:18
Nếu bạn cũng có nhiều yếu tố và bạn muốn có một liên kết với nút đọc thêm sau khi Ellipsis, hãy xem https://stackoverflow.com/a/51418807/10104342 Nếu bạn muốn một cái gì đó như thế này:
Đã trả lời ngày 19 tháng 7 năm 2018 lúc 9:21Jul 19, 2018 at 9:21
Ưu điểm: + Trình duyệt chéo (IE11, Edge, Chrome, Firefox, Safari, v.v.) + Nhìn tự nhiên nhất Nhược điểm: - Thêm nhiều yếu tố bổ sung cho DOM Tôi không hài lòng với bất kỳ cách giải quyết nào tôi đã thấy. Hầu hết trong số họ sử dụng kẹp dòng hiện chỉ được hỗ trợ trong WebKit. Vì vậy, tôi đã chơi xung quanh với nó cho đến khi tôi đưa ra một giải pháp. Giải pháp JavaScript thuần túy này phải tương thích với IE10 và lớn hơn và tất cả các trình duyệt hiện đại. Điều này chưa được kiểm chứng bên ngoài không gian ví dụ StackOverflow bên dưới. Tôi nghĩ rằng đây là một giải pháp tốt. Một cảnh báo lớn là nó tạo ra một nhịp cho mỗi từ bên trong thùng chứa, điều này sẽ tác động đến hiệu suất bố cục, do đó, số dặm của bạn có thể khác nhau. 1 2 3Đã trả lời ngày 12 tháng 10 năm 2018 lúc 21:52Oct 12, 2018 at 21:52
Matt lmatt lMatt L 6288 Huy hiệu bạc12 Huy hiệu đồng8 silver badges12 bronze badges 1 |