用css控制字数，超出部分显示省略号

有时候需要控制下文字数，不然就会溢出，页面就会变样不美观。这时我们就可以用css控制字数，超出部分显示省略号。可以不换行，超出部分显示省略号，也可以可以换行，多行，超出部分显示省略号。

1、不换行，超出部分显示省略号

CSS部分：

.box{
    width:260px;
    /*超出部分就隐藏*/
    overflow:hidden;
    /*不换行设定*/
    white-space:nowrap;
    /*超出部分的文字显示省略号*/
    text-overflow:ellipsis;
}

HTML部分：

<div class="box">用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号</div>

2、可以换行，多行，超出部分显示省略号

CSS部分：

.box{
    width:260px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*2行*/
    -webkit-line-clamp: 2;
    overflow: hidden;
}

HTML部分：

<div class="box">用css控制字数，超出部分显示省略号用css控制字数，超出部分显示省略号</div>