文本溢出用省略号表示

一、介绍

1. white-space属性：

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

2. text-overflow属性

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

二、单行文本溢出

div {
    width: 200px;
    height: 30px;
    line-height: 30px;
    
    /* ---------------------------------------------------- */
    
    white-space: nowrap;      /* 1. 强制文本单行显示 */
    overflow: hidden;  	      /* 2. 溢出隐藏 */
    text-overflow: ellipsis;  /* 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. 使内容垂直显示 */
}