应对不同情况的多行文本溢出

• 第一种：纯css控制

overflow: hidden;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;

移动端浏览器绝大部分是WebKit内核的，所以该方法适用于移动端；

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis 以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

• 第二种：截取字符串

$scope.showFolder = function() {
    var strLen, strBox, lastEle;
    strBox = document.querySelectorAll('.content');
    angular.forEach(strBox, function(str) {
        if(str.innerHTML.length >= 30) {
            str.innerHTML=str.innerHTML.substr(0,30)+ '...';
            lastEle = str.parentNode.parentNode.lastElementChild;
            lastEle.classList.remove('hidden');
        }
    });
}

这是angular中的写法，主要是利用文字长度来实现的；

<div ng-switch-default>
    <span class='content'>{{rec.value}}</span>
</div>
<div class='text-right text-color visible-xs hidden' ng-click='showStr($event)'>展开&nbsp;&or;</div>

.text-cut{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
}
.hidden{
    display:none;
}

angular.element(document).ready(function() {
    $scope.showFolder();
});
$scope.showFolder = function() {
    var strBox, lastEle;
    strBox = document.querySelectorAll('.content');
    angular.forEach(strBox, function(str) {
        if(str.offsetHeight >= 43) {
            lastEle = str.parentNode.parentNode.lastElementChild;
            lastEle.classList.remove('hidden');
            str.classList.add('text-cut');
        }
    });
}
$scope.showStr = function(event) {
    event.preventDefault();
    event.stopPropagation();
    var checkEle = event.target.previousElementSibling.lastElementChild;
    checkEle.classList.remove('text-cut');
    event.target.classList.add('hidden');
}

*当页面准备好后，就会调用showFolder的方法；当点击“展示”时，会把全部的字展示完成。
*如果引入了jQuery，可按照jQuery取元素的方法，不必写的如此麻烦；