字符串截取

2017-10-24

内容溢出

很多时候我们写页面的时候一定会碰到内容溢出，比如文章列表很长，又受其宽度的限制，此时超过的宽度的内容会以…显示

一般情况我们写一个固定高度，然后overflow:hidden,页可以做到内容截取，但是这种写法会存在不会出现…的出现，而且写死的话，不利于屏幕适配。

经过长时间的资料搜索以及项目试验，我发现了一种css写法，是可以做到字符截取，不需要用到js,代码如下：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6; // 显示行数
overflow: hidde

因为最近在写vue项目，经过一番资料查询，发现是可以利用filter来截取的，代码如下：

export default {
    ...
    filters : {
        lineClamp(value){
            return value.length > 200 ? value.slice(0, 200) + '...' : value
        }
    }
    ...
}

使用方法为：

<div>content | lineClamp </div>

然后小福利给大家：
有时候我们在写文本段落的时候，会发现段落文字两边不会对齐，因为字体影响的原因，导致左边文字很是工整，但是右边文字却不一致，这个时候就可以用到我们text-align:justify
使用方法为：

text-align:justify;
text-align-last:justify;

以上是我在实际项目中用到的文字字符截取的方法，仅供大家参考！！