CSS設置文本超出隱藏，以“...”顯示

一、單行文本溢出隱藏

當文本內容寬度或高度超出容器時，會產生溢出。如圖所示

overflow: hidden;    /*   超出容器的部分影響  */
white-space: nowrap;   /*  文本不換行   */
text-overflow: ellipsis;   /*  超出容器的文本顯示省略號  */

二、多行本文溢出隱藏

overflow:hidden;   /* 溢出部分進行隱藏 */
display: -webkit-box;  
-webkit-box-orient: vertical;  /* 盒模型元素從頂部向底部垂直排列子元素 */
-webkit-line-clamp: 2;  /* 顯示兩行 */
text-overflow: ellipsis;