hi,欢迎访问本站!
当前位置: 首页系统/服务器正文

css 单行多行文本超出宽度显示省略号 多行文本的省略号显示失效

墨初 系统/服务器 1阅读

css 单行多行文本超出宽度显示省略号 多行文本的省略号显示失效

文本在超出宽度时显示省略号的css属性设置 单行文本

.text { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

多行文本

.text { width: 100px; height: 60px; line-height: 20px; /*设置行高和总体文本高度防止文字在显示时被截取了半行*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /*表示最终显示的行数*/ -webkit-box-orient: vertical;}

多行文本的显示有可能会遇上失效的情况,autoprefixer会自动移除老式过时的属性-webkit-box-orient,所以此时需要多添加两行代码:先关闭autoprefixer的移除功能,然后再重新开启

.text { width: 100px; height: 60px; line-height: 20px; /*设置行高和总体文本高度防止文字在显示时被截取了半行*/ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /*表示最终显示的行数*/ /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */}
标签:
声明:无特别说明,转载请标明本文来源!