如何使文本出现省略号

当文字太多，而我们不需要展示那么的时候就会出现省略号是常见的需求，那么出现省略号怎么实现呢？

第一种，单行文本出现省略号;就是使用text-overflow：ellipsis属性和属性值，

还要一定要配合white-space：nowrap;表示不换行，overflow：hidden;溢出隐藏，当然也得你哈的文字超过你的宽度才行

div {

    height: 30px;

    width: 100px;

    border: 1px solid red;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

}

第二种，多行文本溢出出现省略号，这个问题的话估计困扰了很多人，那么我们来看看怎么实现

div {

    position:relative;

    line-height:1.4em;

    height:4.2em;

    overflow:hidden;

}

div::after{

   content:"...";

   font-weight:bold;

   position:absolute;

   bottom:0;

   right:0;

   padding:0 20px 1px 45px;

}

这=个实现原理是在标签后面添加一个伪元素，伪元素的内容就是省略号，

如果IE8以下不支持就把::after 改为:after就OK啦

还有一种情况，不想用伪元素出现省略号怎么实现多行文本出现省略号呢？
width:value;
overflow : hidden;
text-overflow: ellipsis;

/* display：box主要是控制父容器里面子元素的排列方式 */
display: -webkit-box;
/*  实现限制文字显示多行，多余的用... */
-webkit-line-clamp: 2; //当文字达到两行以后就会出现省略号
/* 属性规定框的子元素应该被水平或垂直排列。 */
-webkit-box-orient: vertical;