HTML5+CSS3之隐藏文本内容鼠标悬停显示所有

99小饼干

于 2021-04-17 17:31:00 发布

阅读量1.5w

点赞数 12

分类专栏：网页开发随笔文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_48917225/article/details/115798309

版权

本文介绍了如何使用HTML5和CSS3实现文本内容在一行或几行内显示，并在超出限制后以省略号隐藏，同时在鼠标悬停时显示所有内容。通过设定CSS样式和HTML实体，详细展示了单行和多行隐藏显示的实例效果。

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

在我们进行网页开发时出现有下列需求的时候，我们来看看怎么才可以做到。
1.文本内容在一行或者几行显示
2.限定当文本内容超出限制后隐藏显示
3.用省略号代替隐藏内容
4.当鼠标悬停在隐藏文本内容上时，显示所有内容。

第一步：设定隐藏显示的css样式

/*单行隐藏显示的样式设定*/
.hiddenMemo{
   
	width:100px;    		/*设置隐藏显示的最大宽度*/
  	white-space:nowrap;  	/* 设置文字在一行显示，不能换行 */  
  	overflow: hidden;    	/* 文字长度超出限定宽度，则隐藏超出的内容 */
  	te