css实现文本超出显示省略号

最新推荐文章于 2024-06-05 09:45:20 发布

言程序plus

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量570

点赞数

分类专栏： CSS从入门到精通文章标签： css css3 html5

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/m0_61243965/article/details/130124241

版权

CSS从入门到精通专栏收录该内容

31 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

单行文本显示省略号

width:100px; //设置宽度
max-width:200px; //也可以设置最大宽度
overflow: hidden;//溢出隐藏
white-space: nowrap; // 强制一行显示
text-overflow: ellipsis;// 显示。。。省略号

多行文本显示省略号

    width: 100px; //设置宽度
    max-width:200px; //也可以设置最大宽度
	overflow : hidden;  // 溢出隐藏
	display: -webkit-box;    //  自适应布局 弹性伸缩盒子
	-webkit-box-orient: vertical; //垂直排列子元素 伸缩盒子的子元素排列
	-webkit-line-clamp: 3;   //最多显示几行 多出部分。。。显示
	text-overflow: ellipsis; // 显示省略号