CSS文本溢出显示省略号、换行总结

经过一波中大型项目的洗礼，一堆bug的冲击，发现在文本溢出方面还存在一些瑕疵，大致总结了一下文本溢出显示省略号的几种使用场景。

1、单行文本超出显示省略号

单行文本超出这种处理起来还是比较简单的，正常思路都是这样子的超出部分不换行并且隐藏、出现省略号。

width: 180px; /* 需要固定宽度，不然容器会被自动撑开 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
white-space: nowrap;    /* 文本不会换行,知道遇见<br/>才换行 */

开心的一波代码下去发现可以了，但是宽度被定死了很不爽，有时候不能固定宽度，那么我们可以这样写，给元素设置一个最大宽度而不是之前那个width。

max-width: 180px;

2、多行文本超出显示省略号

多行文本是个比较恶心的东西，纯css实现我只知道webkit内核才有，先上一波纯css代码

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;    /* 对象作为弹性伸缩模型显示 */
-webkit-line-clamp: 2;  /* 块元素显示的文本行数 */
-webkit-box-orient: vertical;  /* 从上到下排列子元素 */

五行代码上去发现chrome可以了，天真的以为chrome上显示完美了，然而现实总是残酷的。我们来测试两个案例

1、文本内容为纯数字或者纯英文字母

2、文本内容为中文标点

很显然中文标点、纯数字和纯英文字母都没有达到预期的效果，是不是一脸蒙蔽，然而事实就是如此，解决办法就是我们再加一个css属性，word-wrap: break-word; 这样一来在chrome基本上都可以显示正常了。

伪元素实现

.text2 {
    margin-top: 10px;
    width: 200px;
    height: 60px;
    line-height: 30px;
    overflow: hidden;
    background-color: #dcdcdc;
    position: relative;
}
.text2::after {
    content: "...";
    position: absolute;
    right: 5px;
    bottom: 0;
}

这种方式需要设置line-height和height，并且height = 行号 * line-height，并且有一个很尴尬的地方，最后的伪元素可能会与文字重叠，有一种相对比较好的解决办法。给伪元素添加一个背景，并且渐变，即可实现相应的效果，手机端这种实现方式还是很常见的。

.text2::after {
	content: "...";
	position: absolute;
	right: 5px;
	bottom: 0;
	padding-left: 20px;
	background: -webkit-linear-gradient(left, transparent, #dcdcdc 55%); 
	background: -o-linear-gradient(right, transparent, #dcdcdc 55%); 
	background: -moz-linear-gradient(right, transparent, #dcdcdc 55%); 
	background: linear-gradient(to right, transparent, #dcdcdc 55%);
}

以上两种方式多多少少存在一些兼容问题，想要接近完美的实现，可以结合js和后端实现。我这里简单用js简单实现一下，当然也可以根据实际需求修改。

let dom = document.querySelector('.text2');
CropString(dom, 60);

// 超出部分隐藏并显示省略号
function CropString(dom, height){
    if(!dom) return;
    // 获取dom节点中的文本去除前后空格
    let text = dom.innerHTML.trim();
    let newtext = '';
    if(dom.clientHeight < height) {
        return ;
    } else {
        for(let i  = 0; i < text.length; i++){
            // 一个字一个字往上加，直到容器高度>=对应的值
            newtext += text[i];
            dom.innerHTML = newtext;
            if(dom.clientHeight > height) {
              break;
	    }
        }

        // 删掉最后两个字符，并添加省略号
        newtext = newtext.substring(0, newtext.length - 2);
        newtext += '...';
        dom.innerHTML = newtext;
    } 
}

3、文本换行

虽然前面已经用到过几次换行了，但是还是有必要再提一下，平时项目中还是会有很多使用场景。

1) css设置宽度自动换行，这是最简单的方式，但是会存在一些问题，也就是之前那两个测试案例，连续的纯数字、纯英文字母和中文标点是无法换行的。

2) 解决1)中存在的问题，为元素添加word-wrap: break-word; 实现强制换行。