七、多行文字截取

7.1 多行文字截取显示省略号

.box {
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    margin: 50px auto;
    font-size: 20px;
    line-height: 50px;  
    /* 设置显示模式box */
    display: -webkit-box;
    /* 盒子排列方式  垂直排列*/
    -webkit-box-orient: vertical;
    /* 显示行数 */
    -webkit-line-clamp: 2;
    /* 文字超出显示省略号 */
    text-overflow: ellipsis;
    /* 文字超出盒子溢出隐藏 */
    overflow: hidden;
}

7.2 单行文字截取显示省略号

/* 单行文字显示省略号 */
/* 文字不换行 */
white-space: nowrap;
/* 文字超出显示省略号 */
text-overflow: ellipsis;
/* 内容溢出隐藏 */
overflow: hidden;

7.3 英文字母强制换行（慎重使用）

.box2 {
    width: 300px;
    height: 100px;
    font-size: 20px;
    line-height: 50px;
    margin: 50px auto;
    border: 1px solid #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    /* 强制将文字换行 慎重使用 */
    word-break: break-all;
}