欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

超出文本显示省略号

程序员文章站 2022-03-02 15:22:13
...

1、单行文本超出隐藏显示省略号

p{
	white-space:nowrap; /*强制文本一行显示*/
	overflow:hidden;/*超出元素默认宽度内容隐藏*/
	text-overflow:ellipsis;/* 使用省略号代表有内容未显示*/
}

2、webkit的多行文本溢出隐藏,显示省略号

-webkit-line-clamp:用该属性来限定块元素内文本显示的行数
display:-webkit-box:将对象作为弹性的伸缩盒子显示
-webkit-box-orient:设置伸缩盒子对象内子对象的排列方式
text-overflow:ellipsis;使用省略号告诉用户有内容未显示
overflow:hidden;超出部分隐藏