<!DOCTYPE html><html><head><meta charset="UTF-8"><title>单行和多行文字溢出省略号显示</title><style type="text/css">.container1{width: 150px;height: 80px;background-color: #f5f5f5;margin: 2px auto;white-space: nowrap;/*先强制一行内显示文本*/overflow: hidden;/*超出部分隐藏*/text-overflow: ellipsis;/*文字用省略号代替超出部分*/}.container2{width: 150px;height: 40px;background-color: #f5f5f5;margin: 2px auto;/*有较大兼容性问题，适合于webKit浏览器或者移动端(移动端大部分使用webKit内核)*/overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/*弹性伸缩盒子模型显示*/-webkit-line-clamp:2 ;/*限制在一个块级元素显示的文本行数*/-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/}</style></head><body><div class="container1">单行文字溢出省略号显示</div><div class="container2">多行文字溢出省略号显示,多行文字溢出省略号显示</div></body></html>
欢迎访问我的个人博客
