首页 前端知识 最多显示2行文字,多余的省略显示。

最多显示2行文字,多余的省略显示。

2024-03-27 10:03:55 前端知识 前端哥 557 502 我要收藏

前端在 CSS 中最多显示 2 行文字,可以使用 overflow: hidden 和 text-overflow: ellipsis 属性,并设置一个高度限制。

例如:

.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.qianduange.cn//article/4214.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!