Tạo dấu 3 chấm cuối dòng với text ellipsis
07/05/2019
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 :
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.
