css 定宽溢出文本适配滚动

最新推荐文章于 2025-01-20 14:51:42 发布

原创最新推荐文章于 2025-01-20 14:51:42 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

Html与css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现的文本滑动效果，当文本长度超过设定宽度时，通过鼠标悬停触发动画，使文本从左到右滑动展示全部内容。此技巧适用于网页设计中对固定宽度容器内的长文本进行优雅处理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrap {
				position: relative;
				width: 200px;
				height: 100vh;
				background: #ddd;
				overflow: hidden;
			}

			span {
				display: inline-block;
				white-space: nowrap;
				padding: 5px;
				line-height: 24px;
				cursor: pointer;
			}

			.title:hover {
				animation: move 5s infinite alternate linear;
			}

			@keyframes move {
				0% {
					transform: translate(0, 0);
				}

				100% {
					transform: translate(calc(-100% + 200px), 0);
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<span class="title" title="超过定宽被挡住无法观看全部">超过定宽被挡住无法观看全部</span>
			<span class="title" title="超过定宽被挡住无法观看全部">超过定宽被挡住无法观看全部</span>
			<span class="" title="没超过定宽">没有超过定宽</span>
			<span class="title" title="超过定宽被挡住无法观看全部">超过定宽被挡住无法观看全部</span>
		</div>
	</body>
</html>

超出定宽的文本,鼠标悬浮,可以从左到右滑动