CSS 很早就有 build-in 方案 for 省略号 ellipsis 了. 但是只能 one line, 遇到多行的时候只能用 JS. 后来出了 line-clamp 终于把 multiple line ellipsis 解决了. 参考: stackoverflow – Limit text length to n lines using CSS Can I use line-clamp Multi-Line Truncation with the New Line Clamp P...
此时,下面的这个css属性可以帮助你实现这个需求: -webkit-line-clamp:2; // 该属性存在兼容性问题
$line-multiple: 1.3; $font-size: 1em; display: block; display: -webkit-box; max-height: $font-size * $line-multiple * $lines; line-height: $font-size * $line-multiple; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; -webkit-line-clamp: $lines; -webkit-box-orien...
plus a few more next to them at the physical end of the line to make room for the ellipsis, then paint it there. (There are nuances between the Chrome/webkit and the Firefox approaches, but I don't believe those nuances are relevant to the point I want to make ...
This is a non-standardized css-based solution for some webkit-based browsers. It may have better render performance but also can be fragile. Be sure to test your use case if you use it. Seehttps://css-tricks.com/line-clampin/#article-header-id-0for some introduction. Also, you may wa...
The ultimate goal is to prevent “losing” data, somethingthat can certainly happen in CSS. Text that inadvertently overflows a container is lost in the sense that it’s simply not there. And if that text is simply not there, users will miss it, even if it is the best and most well...
直接⽤css属性设置(只有-webkit内核才有作⽤)overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;移动端浏览器绝⼤部分是WebKit内核的，所以该⽅法适⽤于移动端；-webkit-line-clamp⽤来限制在⼀个块元素显⽰的⽂本的⾏数,这是...
正常情况下如果需要使用文本超出隐藏,通过 css 就可以完成 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 1. 2. 3. 但是如果需要实现多行文本溢出,就很难实现里,谷歌浏览器虽然支持 css 多行溢出,大部分浏览器又不支持,所以作用也不大。
This is a non-standardized css-based solution for some webkit-based browsers. It may have better render performance but also can be fragile. Be sure to test your use case if you use it. Seehttps://css-tricks.com/line-clampin/#article-header-id-0for some introduction. Also, you may wa...
css部分 .box3 { /* height: 120px; */ line-height: 30px; background-image: l...