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

/*多行文本溢出显示省略号*/        #p2{            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 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/        }