1. 用到的属性

white-space属性：

white-space: nowrap;  强制在一行显示，直到遇到br标签为止。
white-space: normal;  自动换行显示（默认）

text-overflow属性：

text-overflow: ellipsis;    使用省略符号代替被隐藏文本
text-overflow: clip;        直接将要隐藏的文本隐藏起来

2. 单行文本溢出

div {
    width: 200px;
    height: 30px;
    line-height: 30px;
    
    /* ---------------------------------------------------- */
    
    white-space: nowrap;  /* 1. 强制文本单行显示 */
    
    overflow: hidden;  /* 2. 将溢出的文本隐藏 */
    
    text-overflow: ellipsis;  /* 3. 将被隐藏的文本用省略号表示 */
}

3. 多行文本溢出

div {
    width: 290px;
    height: 126px;
    border: 2px solid black;
    text-indent: 2em;
    
    /* ---------------------------------------------------- */
    
    overflow: hidden; /* 1. 将溢出的文本隐藏 */
    
    text-overflow: ellipsis; /* 2. 将被隐藏的文本用省略号表示 */
    
    display: -webkit-box; /* 3. 设置自适应盒子模型（这个属性第一次见，可能理解错误） */
        
    -webkit-line-clamp: 6; /* 4. 在第几行开始用省略号显示 */
    
    -webkit-box-orient: vertical; /* 5. 使内容垂直显示 */
}