Css 悬停时使用字母间距时保持宽度

我有一些基本的按钮样式，其中在

：hover

上添加

字母间距

属性：

.btn{
显示：内联块；
文本对齐：居中；
背景色：透明；
边框：1px实心透明；
填充：0.375雷姆0.75雷姆；
字号：1rem；
边界半径：0.25雷姆；
光标：指针；
过渡：所有0.2秒缓解；
}
.btn主要{
背景色：#8065F1；
颜色：#FFFFFF；
}
.btn大型{
边界半径：32px；
盒影：02px80px0rgba（74,74,74,0.23）；
填充：0.25雷姆3雷姆；
字体大小：1.5rem；
文本转换：大写；
}
.btn:悬停{
字母间距：4px；
}

---

Lorem

关于近似的想法，这是复制文本，考虑到一个隐藏的文本已经具有

字母间距

，并且顶部的另一个文本已经通过动画填充隐藏文本定义的空间：

下面是一个使文本颜色与背景颜色相同的想法：

.btn{
显示：内联块；
文本对齐：居中；
背景色：透明；
边框：1px实心透明；
填充：0.375雷姆0.75雷姆；
字号：1rem；
边界半径：0.25雷姆；
光标：指针；
过渡：所有0.2秒缓解；
边缘底部：10px；
}
.btn主要{
背景色：#8065F1；
颜色：#FFFFFF；
}
.btn大型{
边界半径：32px；
盒影：02px80px0rgba（74,74,74,0.23）；
填充：0.25雷姆3雷姆；
字体大小：1.5rem；
文本转换：大写；
}
.btn：：之前{
内容：attr（数据文本）；
位置：绝对位置；
左：0；
右：0；
文本对齐：居中；
字母间距：首字母；
颜色：#fff；
过渡：所有0.2秒缓解；
}
.btn{
字母间距：4px；
颜色：#8065F1；
位置：相对位置；
}
.btn:悬停：：之前{
字母间距：4px；
}

Lorem
乱数假文
Lorem Ipsum Dolor

如何关闭框大小，然后使用百分比作为填充？不管你的内容有多大，它都应该工作得很好，但是我的数字可能是错误的，所以你需要调整数字以使其准确

.wrapper{
显示：内联块；
}
钮扣{
框大小：内容框；
填充：0.10.4%；
边界：无；
宽度：100%；
字体大小：13px；
}
按钮：悬停{
字母间距：0.1米；
填充：0；
}
.外包装{
}

小文本
大得多的文本
小文本小文本小文本小文本小文本小文本

也许玩

填充可以帮助解决另一个问题是，根据字母的数量，宽度会增加很多，你将如何处理这个问题？@Temaniaf如果是，这是主要问题。正如我所说，它可以用JS完成，但我想知道是否有CSS解决方案。编辑-我明白你的意思，如果字符串更大，那么只有宽度是不够的。有办法吗？@JoykalInfotech你能举个例子吗？我想了想，但我意识到这不是一个合适的解决方案。看起来像是一个“黑客”但很好的解决方案——我从来没有想到过。有趣的是，没有“更简单的”解决方案。@Vucko我认为没有简单的解决方案，因为对于每个字母，你都会增加
xpx
，因此它是动态的，你不知道
xpx
会有多大的过度，但可能有一些事情我没有想到：）@Vucko我已经修改了我的答案……但现在我确信这是不可能的，因为浏览器呈现子像素的方式不同，取决于它是%还是px。