[分享]css3文字超出滑动

在Web开发中，有时候我们需要展示一些比较长的文字，但是又想不占用太多的页面空间。这时候，我们可以使用CSS3提供的文字超出滑动效果来实现这一需求。 要实现文字超出滑动效果，我们需要使用CSS3中的o...

在Web开发中，有时候我们需要展示一些比较长的文字，但是又想不占用太多的页面空间。这时候，我们可以使用CSS3提供的文字超出滑动效果来实现这一需求。
要实现文字超出滑动效果，我们需要使用CSS3中的overflow属性和white-space属性。其中，overflow属性控制超出元素框的内容如何展示，而white-space属性控制如何处理元素中的空白字符。
首先，我们需要创建一个容器，将需要展示的文字放到这个容器里面。然后，我们给容器指定一定的宽度和高度，并设置overflow属性为hidden，这样超出容器范围的文字就会被隐藏起来了。
接下来，我们需要使用white-space属性，将长文本按照单词进行分割。这样，当文字超出容器范围的时候，只会超出一个单词，而不是一个字符或者一个字母。
最后，我们再使用CSS3的transition属性和scroll-behavior属性，来实现鼠标悬浮在文字上面时，文字出现动态滑动的效果。
下面是实现文字超出滑动效果的示例代码：

<div class="container">
  <p class="long-text">这是一段比较长的文字，用来演示如何实现文字滑动效果。这段文字超出了容器的范围，但是因为我们设置了white-space: nowrap属性和overflow:hidden属性，所以这段文字不会被显示出来。如果你想要看到全部的内容，就需要将鼠标悬浮在这段文字上面。</p>
</div>
<br>
.container {
  width: 300px;
  height: 50px;
  overflow: hidden;
}
<br>
.long-text {
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}
<br>
.long-text:hover {
  scroll-behavior: smooth;
  overflow: auto;
  white-space: normal;
  height: 100px;
} 

在上面的代码中，当鼠标悬浮在long-text类的p标签上时，会触发hover事件，将overflow属性设置为auto，将white-space属性设置为normal，并将height属性设置为100px。这样，长文本就可以动态滑动了。
总之，使用CSS3实现文字超出滑动效果是一种非常方便的方法，可以让我们在展示长文本的时候，既不占用过多的页面空间，又能以一种优雅的方式呈现出来。