文本溢出怎么处理

单行文本溢出

.el{
    overflow: hidden;            // 溢出隐藏
    text-overflow: ellipsis;      // 溢出用省略号显示
    white-space: nowrap;         // 规定段落中的文本不进行换行
}

多行文本溢出

.el{
    overflow: hidden;            // 溢出隐藏
    text-overflow: ellipsis;     // 溢出用省略号显示
    display:-webkit-box;         // 作为弹性伸缩盒子模型显示
    -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
    -webkit-line-clamp:3;        // 限制显示的行数
}

兼容方案

p {
    position:relative;
    line-height:1.5em;
    /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为3 */
    height:3em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding: 0 5px;
    background-color: #fff;
}

• IE6、7不支持after和content，需要标签代替
• 需要知道显示行数和设置行高