Css -think to write

多行文本溢出处理

---

单行文本溢出：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

width: 100px;     //部分浏览器需要加

多行文本溢出：

    1.webkit内核浏览器或移动端：

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

    2.跨浏览器解决方案：

p {

    position: relative;

    line-height: 1.4em;

    /* 3 times the line-height to show 3 lines */

    height: 4.2em;

    overflow: hidden;

}

p::after {

    content: "...";

    font-weight: bold;

    position: absolute;

    bottom: 0;

    right: 0;

    padding: 0 20px 1px 45px;

    background: url(ellipsis_bg.png) repeat-y; //ellipsis_bg.png为省略号的渐变图片

}