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%]?
Tôi đã tìm thấy hàm
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.
p {
width:100%;
height:20%;
background:red;
position:absolute;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Tôi có jsfiddle này để minh họa vấn đề. //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:
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}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.
Line Kẹp là một CSS độc quyền và không có giấy tờ [WebKit]: //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
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.
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.
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 đơn
Với
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.
- Phải có
8,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.
9 hoặcLorem 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.
0p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } - Phải có
1p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } - Phải có
2 với giá trị khác vớip { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; }
3p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; } - Phải là
4 hoặcp { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; }
5 [hoặc tương đương chức năng, chẳng hạn như một mục Flex].p { width: 200px; white-space: nowrap; overflow: hidden; display: inline-block; text-overflow: ellipsis; border: 1px solid #ddd; margin: 0; }
Vì vậy, điều này sẽ hoạt động:
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
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.
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}Một bước đi lớn ở đây:
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}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.
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.
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}Một bước đi lớn ở đây:
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}- Ellipsis cho văn bản đa dòng
- Bởi vì CSS không có tài sản cho dấu chấm lửng trên văn bản đa dòng, các cách giải quyết khác nhau đã được tạo ra. Một số phương pháp này có thể được tìm thấy ở đây:
- jQuery dotdotdot ...
- Kẹp dòng [cắt ngắn văn bản]
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
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Michael Benjaminmichael BenjaminJun 10, 2019 at 8:38
3
324K95 Huy hiệu vàng541 Huy hiệu bạc664 Huy hiệu Đồng
body {
margin: 0;
padding: 50px;
}
/* mixin for multiline */
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
max-height: 6em;
text-align: justify;
margin-right: -1em;
padding-right: 1em;
}
.block-with-text:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}
.block-with-text:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
}The Hitch Hiker's Guide to the Galaxy has a few things to say on the subject of towels. A towel, it says, is about the most massivelyuseful thing an interstellar hitch hiker can have. Partly it has great practical value - you can wrap it around you for warmth as you bound across the cold moons of Jaglan Beta; you can lie on it on the brilliant marble-sanded beaches of Santraginus V, inhaling the heady sea vapours; you can sleep under it beneath the stars which shine so redly on the desert world of Kakrafoon; use it to sail a mini raft down the slow heavy river Moth; wet it for use in hand-to-hand-combat; wrap it round your head to ward off noxious fumes or to avoid the gaze of the Ravenous Bugblatter Beast of Traal [a mindboggingly stupid animal, it assumes that if you can't see it, it can't see you - daft as a bush, but very ravenous]; you can wave your towel in emergencies as a distress signal, and of course dry yourself off with it if it still seems to be clean enough. More importantly, a towel has immense psychological value. For some reason, if a strag [strag: non-hitch hiker] discovers that a hitch hiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, face flannel, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet weather gear, space suit etc., etc. Furthermore, the strag will then happily lend the hitch hiker any of these or a dozen other items that the hitch hiker might accidentally have "lost". What the strag will think is that any man who can hitch the length and breadth of the galaxy, rough it, slum it, struggle against terrible odds, win through, and still knows where his towel is is clearly a man to be reckoned with.
Đã 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
6911 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: //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ư
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}Điều duy nhất là
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
This is a test of CSS text-overflow: ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Kiểm tra mã sau. Nếu bạn thay đổi chiều cao của cửa sổ,
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}
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:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Cá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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Tô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:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
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
p {
width:100%;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background:#fff;
position:absolute;
}Đã 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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
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:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendreritLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. Nam id tellus mi. Mauris vestibulum, eros ac ultrices lacinia, justo est faucibus ipsum, sed sollicitudin sapien odio sed est. In massa ipsum, bibendum quis lorem et, volutpat ultricies nisi. Maecenas scelerisque sodales ipsum a hendrerit.
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. //codepen.io/anugraha123/pen/wobdob
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
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
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Đã 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:
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Và tôi chỉ cần kiểm tra bằng mã JS để tràn trên các div, như thế này:
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Ví dụ sử dụng trong HTML:
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Đã 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.
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Hã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.
//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
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Đã trả lời ngày 5 tháng 12 năm 2017 lúc 21:25Dec 5, 2017 at 21:25
1
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Hoặ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.
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Đã 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 ...
p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}Đã 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:
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.
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 //stackoverflow.com/a/51418807/10104342
Nếu bạn muốn một cái gì đó như thế này:
Mỗi tháng 10 TB đầu tiên không được tính phí. Tất cả lưu lượng truy cập khác ... Đọc thêm
Đã 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
+ Cross browser [IE11, Edge, Chrome, Firefox, Safari, etc.]
+ Most natural looking
Nhược điểm: - Thêm nhiều yếu tố bổ sung cho DOM
- Adds lots of extra elements to the 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.
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.
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.
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.
Đã 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