js实现表格中最多显示两行，超出使用省略号

1.PC端

 //HTML:
 {
                        field: 'Description', align: 'left', title: '描述', width: 239, templet: function (d) {
                            return '<span class="description">' + d.Description + '</span>'
                        }
                    }
             // 标题两行超出部分加省略号start
            var description = $('.description');
            var defaultTip = $('.defaultTip');
            twoLineDisplay(description);

//js:
            // 最多显示两行，超出显示...
       	 function twoLineDisplay(elems) {
            var titleObj = elems;
            for (var i = 0, len = titleObj.length; i < len; i++) {
                var arrTitle = titleObj[i].innerHTML.split('');

                var flag = false;
                while (titleObj[i].scrollHeight > titleObj[i].offsetHeight) {
                    titleObj[i].innerHTML = arrTitle.join('');
                    arrTitle.pop();
                    flag = true;
                }

                if (flag) {
                    arrTitle.pop();
                    arrTitle.pop();
                    titleObj[i].innerHTML = arrTitle.join('');
                    titleObj[i].innerHTML += '...';
                }
            }
        }
//css
.defaultTip,.description{
    white-space:pre-wrap ;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    max-height: 42px;
    line-height: 21px;
    word-break: break-all;
    word-wrap: break-word;
}

上面的代码会因为不同符号或者函数在编码中占据不同的字节，使得省略号不能靠近右侧边缘。
修改：

		// 最多显示两行，超出显示...
        function twoLineDisplay(elems) {
            var titleObj = elems;
            for (var i = 0, len = titleObj.length; i < len; i++) {
            	//titleObj[i]为某个单元格DOM元素
                var arrTitle = titleObj[i].innerHTML.split('');

                var flag = false;
                while (titleObj[i].scrollHeight > titleObj[i].offsetHeight) { 
                    if (!flag) {
                        arrTitle.splice(arrTitle.join('').length, 0, '.', '.', '.')
                        flag = true;
                    } else {
                        arrTitle.splice(arrTitle.join('').length - 1 - 3, 1);
                        titleObj[i].innerHTML = arrTitle.join('')
                    }

                }
            }
        }

样式的设置：

.layui-form td{
    &:nth-child(1){
        .layui-table-cell{
            max-height: 56px;
        }
        .layui-table-cell, .layui-table-tool-panel li {
            overflow: visible;
            text-overflow: clip;
            white-space: normal;
            height: auto;
            word-wrap: break-word;
            word-break: break-all;
        }
    }
}

2.移动端

在移动端最多展示两行：

.text-line-comm {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 可以把 块容器 中的内容限制为指定的行数2. */
  -webkit-line-clamp: 2;
  /* 从顶部向底部垂直布置子元素 */
  -webkit-box-orient: vertical;
}

在css中会过滤掉-webkit-box-orient: vertical;解决方案：可以设置内联样式来添加：

<p class="book-summary text-line-comm gray" :style="{'webkitBoxOrient': 'vertical'}">{{ book.shortIntro }}</p>

float浮动跟position:absolute区别：
float浮动跟position:absolute一样拥有脱离文档流的功能，
但是float虽然脱离了文档流但是仍然会占据位置，其他的文本会按照顺序继续排列