css显示省略号

html-css016

css显示省略号,第1张

.goods {

/* 一行显示*/

-webkit-line-clamp: 1

/* 将对象作为弹性伸缩盒子模型显示 */

display: -webkit-box

/*子元素的排列方式 */

-webkit-box-orient: vertical

text-overflow:ellipsis

overflow: hidden

word-break:break-all

}

在CSS中，text-overflow:ellipsis可以在文本隐藏时候在文本末尾加入省略号。所以如果Html里是用li写的。

 

li{text-overflow:ellipsisoverflow:hiddenwhite-space:nowrapdisplay:blockword-break:keep-all

本身不链接或者hover功能的元素也是可以实现它内部的元素隐藏

这样子就可以，你可以把li改成你的元素。