p标签内限制显示

今天总结一篇关于p标签内限制显示内容长度的文章，如有新方法，新思路，欢迎留言

先看看p标签内的显示效果

前两个显示设置了p标签的宽度，后一个不显示设置宽度，因为p标签是块状元素，默认是父容器宽度的100%
以上可了解到，在设置了标签宽度，并且标签内元素超过宽度限制的情况下，内容会自动换行。本次想讲的是第二种情况，将超出文本宽度的内容设置为三个点的省略号。

一、CSS 方法
单行省略

#p1 {
          width:  30%;
          overflow: hidden;
          display: block;
          white-space: nowrap;
          text-overflow: ellipsis;
}
width: 设置显示区宽度，默认为父容器宽度
overflow： 规定当内容溢出元素框时的处理方式，此处意义是当溢出时隐藏溢出内容
display： 规定元素应该生成的框的类型，意义是将显示为块级元素，此元素前后会带有换行符
white-space: 属性设置如何处理元素内的空白， 此处将文本设置为不换行
text-overflow: 规定当文本溢出包含元素时发生的事情, 此处设置为显示省略符号来代表被修剪的文本。

多行省略

 #p1 {
        width: 30%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       border-style: solid;
       background-color: yellow;
}
-webkit-line-clamp: 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
注 意～～～～～～～～～～～～～～
-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，这个属性 目前仅支持webkit浏览器，比较合适WebKit浏览器或移动端。运用次方法在webpack或其它特殊用途中会失效，所以有了下面利用js方法的实现

Tips
将 -webkit-line-clamp:的值设置为1也能达到单行省略的效果哦

二、JS方法
let text = "勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。面具戴太久，就会长到脸上，再想揭下来，除非伤筋动骨扒皮。";
let p = document.getElementById('p0');
if(text.length > 30) {
       var str = "";
       str = text.substring(0, 30) + '...';
       p.innerHTML = str;
}
$(document).ready(function() {
       let text = "勇者愤怒，抽刃向更强者；怯者愤怒，却抽刃向更弱者。面具戴太久，就会长到脸上，再想揭下来，除非伤筋动骨扒皮。";
       if(text.length > 30) {
             $('#p0').text( text.substring(0, 30) + '...');
       }
})