在网页设计中，如何通过纯CSS实现元素悬停时宽度不变、内容内缩并显示图标的效果？-css教程-PHP中文网

在网页设计中，如何通过纯CSS实现元素悬停时宽度不变、内容内缩并显示图标的效果？

花韻仙語

发布： 2025-04-23 21:08:01

原创

610人浏览过

在网页设计中，如何通过纯css实现元素悬停时保持宽度不变、内容内缩并显示图标的效果，是一个常见的需求。特别是当元素的内容长度变化不定时，这个需求变得更为复杂。本文将详细探讨如何使用纯css的方法来实现这一效果。

实现元素在hover状态下保持宽度不变，同时内容内缩并显示图标：

在前端开发中，常常会遇到这种场景：有一个元素，其宽度会因内部数据{{data}}的变化而变化，data的长度是不固定的。我们希望在鼠标悬停到这个元素上时，保持整个span的长度不变，同时内部内容内缩并显示一个图标，类似于3....的效果。

最初的尝试是通过JavaScript来实现这个功能，通过设置和重置宽度来达到效果，但这种方法相对复杂且不够优雅。以下介绍一种纯CSS的实现方法：

HTML结构如下：

立即学习“前端免费学习笔记（深入）”；

<span class="fonttext">
  ABCabcdsfes<i class="texticon">?</i>DEFGHIGK
</span>

登录后复制

CSS样式如下：

.fonttext {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  border: 2px dashed red;
  box-sizing: border-box;
  border-radius: 4px;
}
<p>.texticon {
position: absolute;
width: 20px;
height: 100%;
background-color: #fff;
border: 2px dashed red;
font-style: normal;
right: -21px;
border-left: none;
cursor: pointer;
border-radius: 4px;
top: -2px;
display: inline-table;
}</p><p>.texticon:hover {
background-color: #2d77ed;
}</p><p>.fonttext:hover {
overflow: visible;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: transparent;
}</p><p>.fonttext:hover .texticon {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: transparent;
}</p><p>/<em> 省略号 </em>/
/<em> .fonttext::before {
content: '...';
position: absolute;
width: 10px;
height: 100%;
right: -10px;
background-color: white;
} </em>/
/<em> .fonttext:hover::before {
right: 0px;
} </em>/

登录后复制

在这个实现中，我们通过position: relative和position: absolute来控制图标的位置。图标默认隐藏在元素之外，当鼠标悬停时，.fonttext的overflow属性变为visible，图标显示出来，同时调整边框和圆角以实现无缝衔接。

这种方法的优点在于它完全依赖于CSS，不需要JavaScript的干预，性能更好且更易于维护。如果需要添加省略号，可以取消注释相应的CSS代码，但需要根据实际情况调整位置和样式。

通过这种方式，我们可以在不改变元素宽度的情况下，实现内容内缩并显示图标的效果，满足了设计需求。

在网页设计中，如何通过纯CSS实现元素悬停时宽度不变、内容内缩并显示图标的效果？