首页 前端知识 css超出显示...(单行、多行)

css超出显示...(单行、多行)

2024-02-13 10:02:43 前端知识 前端哥 762 752 我要收藏

1.单行

效果图:

width:335px;//定宽 
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap;  // 默认不换行;

注:必须要定一个宽度。

2.多行

效果图:

width:335px;
overflow: hidden; //超出的文本隐藏
display: -webkit-box;
-webkit-line-clamp: 2; // 设置从第几行后开始省略
-webkit-box-orient: vertical;

注:必须要定一个宽度。

以上代码就能实现上面的效果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1903.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!