如何使用CSS实现元素在hover时保持宽度不变并显示图标？

在前端开发中，如何在元素的悬停状态下保持宽度不变，同时内容内缩并显示图标是一个常见需求。特别是当元素宽度因动态数据变化而变化时，实现这种效果会成为一个挑战。

例如，我们有一个包含{{data}}的元素，由于data的长度不固定，元素的宽度也会随之变化。我们希望在鼠标悬停时，元素的总宽度保持不变，同时在元素内部显示一个图标，并将data内容向内压缩，形成如3....的省略号效果。

虽然可以使用JavaScript编写一个组件来实现这一功能，如下所示：

// 在标签内容每次变化时设置宽度，使标签具有固定宽度
setWidth() {
    const c = this.$refs.content;
    this.width = c.getBoundingClientRect().width;
    c.style.width = `${this.width}px`;
},
// 在标签内容每次变化时重置宽度，使标签内容自适应
resetWidth() {
    this.width = 0;
    this.$refs.content.style.width = '';
}

然而，这种方法不够简洁，并且可能对性能产生影响。实际上，我们可以使用纯CSS更优雅高效地实现这一效果。

假设我们有一个如下的HTML结构：

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

DeepL

DeepL是一款强大的在线AI翻译工具，可以翻译31种不同语言的文本，并可以处理PDF、Word、PowerPoint等文档文件

下载

    ABCabcdsfes?DEFGHIGK

对应的CSS样式如下：

.fonttext {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    border: 2px dashed red;
    box-sizing: border-box;
    border-radius: 4px;
}
.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;
}
.texticon:hover {
    background-color: #2d77ed;
}

.fonttext:hover {
    overflow: visible;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
}
.fonttext:hover .texticon {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: transparent;
}

通过上述CSS，我们可以在鼠标悬停到.fonttext元素上时，保持元素的宽度不变，同时显示.texticon图标，并使内容向内压缩形成省略号的效果。这种方法不仅简洁高效，还能更好地利用CSS的特性来实现动态效果。