css文本省略可以滑动查看

html-css017

css文本省略可以滑动查看,第1张

是的，使用 CSS 文本省略可以实现滑动查看文本，具体步骤如下：

1.定义元素的高度和宽度。

2.使用 overflow : hidden 属性来隐藏文本的剩余部分。

3.使用 text-overflow: ellipsis 来显示省略号。

4.使用 white-space: nowrap 来确保文本不会换行。

5.使用 transition 属性来启用滑动动画，以便在滑动时能够显示文本的全部内容。

.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改成你的元素。