css实现单行、多行文本溢出( )

199 阅读1分钟

1.单行文本溢出

/* 主要来说就是4个属性 */
    width:300px;    /* 1.设置文本的宽度 */
	white-space:nowrap;    /* 2.强制文本不换行*/
	overflow:hidden;    /* 3.溢出文本部分不显示*/
	text-overflow:ellipsis;    /* 4.显示省略符号来代表被修剪的文本。*/

对应显示结果如图所示:

单行文本溢出显示

2.多行文本溢出

适用WebKit浏览器或移动端的页面

  width:300px;     /* 设置宽度  (非必须)*/
  display: -webkit-box;     /* 设为灵活盒模型*/
  -webkit-box-orient: vertical;    /* 垂直排列*/
  -webkit-line-clamp: 2;     /* 显示两行*/
  overflow: hidden;    /* 溢出隐藏*/

对应结果如图:

多行文本溢出显示