css 文本省略号显示

文本省略号是非常常见的需求，而省略号展示又通常分为俩种情况折行和不折行。不折行：

div {

  white-space:nowrap;/* 规定文本是否折行 */

  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */

  text-overflow: ellipsis;

  /* 规定超出的内容文本省略号显示，通常跟上面的属性连用，因为没有上面的属性不会触发超出规定的内容 */

}

折行(能主动控制行数,这里设置的超出 4 行显示省略号)：

div {

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */

  -webkit-line-clamp:; /* 控制最多显示几行 */

  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */

}

巴特西

css 文本省略号显示

最新文章

热门文章