Tạo dấu 3 chấm cuối dòng với text ellipsis

07/05/2019

Bài sau » « Bài trước

Trong bài viết này, Master Frontend sẽ hướng dẫn thủ thuật tạo dấu 3 chấm cuối dòng với text ellipsis

- Code HTML :

<div class="fix-line-css">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</div>

- Code CSS :

.fix-line-css{ display: block; display: -webkit-box; max-width: 400px; height: 16px*1.3*3; /* Fallback for non-webkit */ margin: 0 auto; font-size: 16px; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; background: tomato; color: #fff; }

- Và ta được kết quả như sau :

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

Nhưng với những trình duyệt như Firefox, IE không hỗ trợ webkit thì nó sẽ không hiển thị. Vì vậy để fix cho các trình duyệt trên ta viết thêm code sau: Với thuộc tính :before tạo dấu 3 chấm (...) thuộc tính :after tạo div có màu nền trùng với màu nền của đoạn text và nó sẽ đè lên lớp :before khi số dòng không đủ điều kiện.

@media screen and (min--moz-device-pixel-ratio:0), screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .fix-line-css{ overflow: hidden; position: relative; } .fix-line-css:before{ position: absolute; bottom: 0; right: 0; content: '…'; background: tomato; /* Màu chỗ này trùng với màu nền của đoạn text*/ } .fix-line-css:after{ content: ''; position: absolute; width: 1em; height: 1em; margin-top: 0.2em; z-index: 1; right: 0; background: tomato; /* Màu chỗ này trùng với màu nền của đoạn text*/ } }

Trên đây là cách mình hay làm để tạo dấu 3 chấm cuối dòng cho các đoạn mô tả ngắn, đoạn text trong dự án của mình. 

Bài sau » « Bài trước
Back to top