html中内容超出显示省略号的方法
本博客主要介绍 前端开发中文本过多,以省略号显示。
效果如图:
单行:
<!--单行--><p class="pl">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,</p>
CSS
/*单行文本的溢出显示省略号*/.pl{width: 200px;overflow:hidden;text-overflow:ellipsis; background: goldenrod;white-space: nowrap;/*加宽度width属来兼容部分浏览*/}
多行:
<div id="p2">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,内容会被修剪,但是浏览器不会显示供查看内容的滚动条,默认值是 visible。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</div>
CSS
/*多行文本溢出显示省略号*/#p{width:220px;height:58px;overflow:hidden;text-overflow:ellipsis;background: greenyellow;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;/*-webkit-line-clamp是用来限制在一个块级元素内显示的文本行数,为了实现这个效果,需要结合其他-webkit属性。常见属性如下:display:-webkit-box;必须结合的属性,将对象作为弹性盒子模型显示。-webkit-box-orient:vertical;必须结合的属性,设置或检索伸缩盒子模型对象的子元素的排列方式。 */ }