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;