html中内容超出显示省略号的方法
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;必须结合的属性,设置或检索伸缩盒子模型对象的子元素的排列方式。 */
}
优质内容筛选与推荐>>1、新手做网页设计？这9款经典网页布局设计了解下
2、运输
3、腾讯应用宝Android 应用加固（乐固）操作说明（转）
4、Vuejs项目的Webpack2构建优化
5、C#学习笔记-Win8.1 store app winform开发小记