文字超出指定区域隐藏

这是我参与新手入门的第三篇文章，我们在显示文本的时候都会遇到文本太长导致影响盒子大小从而影响整体布局，所以下面我就展示一下几种文本过长超出指定区域隐藏的方法。

首先第一种是最常用的解决方案，设置盒子属性text-overflow，这个属性可以设置文本溢出后显示为省略号，但是这个属性只能隐藏一行的文本溢出，所以我们还要让文本无法换行。

.text {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
复制代码

上面所讲的只能显示单行隐藏无法实现多行隐藏，如果我们想要实现多行文本隐藏可以通过伪类实现。我们先限制盒子的宽度和高度内容溢出后隐藏，然后设置一个伪类的内容为省略号通过定位到盒子的右下方就可以实现文本溢出隐藏的效果，但是在文本没有这么多的情况下，就不会实现溢出的情况但是省略号仍然存在，所以我们要通过另外一个伪类在文本没有溢出的时候隐藏掉省略号。

.text {
    position: relative;
    max-width: 450px;
    max-height: 3.6rem;
    line-height: 1.2rem;
    font-size: 16px;
    overflow: hidden;
    padding-right: 10px;
    text-align: justify;
}
.text::before {
    position: absolute;
    content: '...';
    right: 0;
    bottom: 0;
}
.text::after {
    position: absolute;
    content: '';
    width: 11px;
    height: 100%;
    right: 0;
    background: #fff;
    z-index: 1;
}
复制代码

还可以通过line-clamp属性限制内容显示的行数，但是通过这个属性设置溢出隐藏可能兼容性就没有这么好，要使用这个属性就需要设置另外两个属性，否则没有效果，首先就是设置盒子的display为box，然后是设置box-orient:vertical属性这个属性是指定内容可以以多行显示，当然设置这些属性都要带上浏览器前缀。

上图可见超出三行的文字到达三行后显示省略号，但是文本还是溢出所以我们还要设置一下overflow属性。

.text {
    width: 250px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
复制代码