在网页设计中，如何通过纯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代码，但需要根据实际情况调整位置和样式。
通过这种方式，我们可以在不改变元素宽度的情况下，实现内容内缩并显示图标的效果，满足了设计需求。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
