文本溢出

一。css單行

兼容性好

.simple-column{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

二。CSS多行

兼容移動端和chrome

.many-column{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /*設置省略號在容器第2行文本後*/
    overflow: hidden;
}

三。js多行

可使用插件解決 Clamp.js

//Single line
$clamp(myHeader, {clamp: 1});

//Multi-line
$clamp(myHeader, {clamp: 3});

//Auto-clamp based on available height
$clamp(myParagraph, {clamp: 'auto'});

//Auto-clamp based on a fixed element height
$clamp(myParagraph, {clamp: '35px'});