CSS悬停时元素宽度不变，内容内缩并显示图标的实现方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何用CSS实现悬停时元素宽度不变、内容内缩并显示图标？》，聊聊，希望可以帮助到正在努力赚钱的你。

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

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

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

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

HTML结构如下：

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

CSS样式如下：

<code>.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>/</p></code>

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

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

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS悬停时元素宽度不变，内容内缩并显示图标的实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。