其他分享
首页 > 其他分享> > CSS设置文本超出隐藏,以“...”显示

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; 

 

标签:...,CSS,超出,webkit,overflow,文本,隐藏,溢出
来源: https://www.cnblogs.com/fzlhutua/p/15965807.html