css设置文字多余部分显示省略号

如果只显示一行,则可以使用以下方法:

  overflow: hidden;

  text-overflow:ellipsis;

  white-space: nowrap;

如果需要显示多行,在需要设置的元素style中添加以下代码:

  word-break: break-all;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

(注意:有时添加在嵌入样式中不生效,需要添加在行内样式中)

设置前效果:

设置后效果:

猜你喜欢

转载自www.cnblogs.com/pearl-/p/10008588.html