单行文本和多行文本超出隐藏

单行文本超出隐藏

三步走

1、文本不换行

2、超出隐藏

3、文本超出部分用省略号表示

div{
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; 
        }

多行文本超出隐藏

div {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;/* 表示自适应布局 */
            -webkit-line-clamp: 3;/* 表示显示几行 */
            -webkit-box-orient: vertical;
        }