css单行、多行溢出文本用省略号展示

1、多行文本，溢出用省略号展示 （可以直接设置显示几行）

效果如下：

代码：

.describe {    
    white-space: pre-wrap !important;/* 设置空白字符 保留所有空白符序列，能正常地进行换行 */
    width: 100px;  
    text-overflow: ellipsis;  /* 当文本溢出元素框时，显示省略符号(...) 来代表被裁剪的文本 */
    display: -webkit-box; /* 用于设置盒子的子元素如何排列，针对Webkit内核（如Chrome, Safari） */   
    -webkit-line-clamp: 2; /* 限制最多显示两行 */   
    -webkit-box-orient: vertical; /* 垂直排列 */   
    display: -moz-box; /* 针对Mozilla Firefox内核 */  
    -moz-line-clamp: 2; /* Firefox的限制行数 */  
    -moz-box-orient: vertical; /* Firefox的垂直排列 */  
    word-wrap: break-word; /* 允许长单词或 URL 地址被断开换行 */   
    word-break: break-all;   /* 允许在单词内换行 */ 
    overflow: hidden;    /* 内容溢出元素框时隐藏溢出部分 */   
    font-size: 14px;  
    color: #717376;   
    line-height: 19.6px;  
}

说明：如果想让文字显示3行，或者N行，直接修改-webkit-line-clamp:的值即可。

2.单行文本，溢出用省略号展示

效果如下：

代码如下：

   .describe {
            width: 100px;
            font-size: 14px;
            /* 超出的文本隐藏 */
            overflow: hidden; 
            /* 溢出用省略号显示 */
            text-overflow: ellipsis; 
            /* 溢出不换行 */
            white-space: nowrap; 

        }