单行-多行文本溢出显示省略号

王汪汪吖

已于 2022-07-19 23:32:58 修改

阅读量201

点赞数 1

分类专栏： css基础文章标签： css css3 html

于 2022-07-18 23:06:01 首次发布

本文链接：https://blog.csdn.net/weixin_43791884/article/details/125862168

版权

css基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

单行文本溢出显示省略号

//1、单行文本溢出显示省略号
widt:200px;
//表示不让文本换行，强制再一行中显示所有的文本

white-space:nowrap;

//超过容器宽度后隐藏

overflow:hidden;

//超出文本显示省略号

text-overflow:ellipsis;

效果图：

多行文本溢出显示省略号

//多行文本溢出显示省略号
width:200px;

// 给容器元素类型转换为

display：-webkit- box;

//设置弹性盒子垂直排列

-webkit-box-orient:vertical;

//控制要显示的行数
//3行
-webkit-line-clamp:3;

//溢出隐藏
overflow:hidden;

效果图：