CSS如何实现文字隐藏超出文字隐藏鼠标移入显示

原创已于 2022-05-05 09:22:56 修改 · 2.5w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#文字隐藏 #超出文字隐藏 #鼠标移入显示

于 2016-09-05 14:47:40 首次发布

杂物间专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，通过使用CSS样式实现文本的溢出隐藏及鼠标悬停显示完整内容的效果。该实例展示了如何设置span元素的宽度，并在不破坏布局的情况下优雅地处理过长的文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				display: inline-block;
				width:60px;
				word-break: keep-all;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			span:hover{
				overflow: visible;
			}
		</style>
	</head>
	<body>
		<div>
			<span>
				欢迎光临本寒舍啊哈哈哈哈啊哈哈哈
			</span>
		</div>
	</body>
</html>