css文本省略可以滑动查看

html-css082

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

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

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

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

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

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

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

大家都知道css中<ul>元素中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白 查了资料才实现下面GIF图的效果。（有什么更好的方法或者有写的不对的地方 希望大神们多多指出，与君共勉）

效果GIF图：

第一步 ul 中的css设置 <ul id = "list"></ul>

#list { overflow-x: auto//设置x轴可滑动 list-style: none//去掉li上的小点 white-space:nowrap//元素不换行 width: auto(宽度) }

第二步 li中的css设置 <li class = "item">

.item { margin-left: 20px//每个li设置间距为20px display: inline-block//让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }

先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。

这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动

width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。

使用用flex-box布局

#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}

效果图：

css

.box {

background: #eee

padding: 10px 0

white-space: nowrap

/*文本不会换行，文本会在在同一行上继续*/

overflow-y: auto

/*可滑动*/

}

/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/

.box::-webkit-scrollbar {

display: none

}

.box1 {

width: 49%

margin-left: 3%

height: 100px

background: #fff

display: inline-block

/*行内块元素*/

}

html：

<div class="box">

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

<div class="box1"></div>

</div>