前端在 CSS 中最多显示 2 行文字,可以使用 overflow: hidden
和 text-overflow: ellipsis
属性,并设置一个高度限制。
例如:文章来源:https://www.toymoban.com/news/detail-438227.html
.box { overflow: hidden; text-overflow: ellipsis; // 只要超过宽度就换行,不论中文还是英文 word-break: break-all; //最多展示两行 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //根据样式设置 line-height: 1.2em; max-height: 2.4em; }
这样,如果文本需要更多的行数才能完全显示,则会省略多余的文本并在末尾显示省略号(...)。文章来源地址https://www.toymoban.com/news/detail-438227.html
到了这里,关于最多显示2行文字,多余的省略显示。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!