Html 具有自动宽度的css动画按钮

我正在制作一个带有css转换的动画按钮，我遇到了一个问题。 按钮应自行调整大小，以便整个文本在元素中始终可见。 问题是我的文本并不总是一样的。我将宽度和填充设置为自动，但不起作用，我不知道如何解决这个问题。 这是我的密码。谁能帮我一下吗。谢谢

.a-btn{
颜色：#ffffc2；
背景色：#ffffc2；
边框：1px实心#dfdfdf；
左侧填充：20px；
右边填充：20px；
位置：相对位置；
浮动：左；
溢出：隐藏；
-webkit转换：所有0.3s线性；
-moz过渡：所有0.3s线性；
-o-过渡：所有0.3s线性；
过渡：所有0.3s线性；
}
.a-btn-text{
显示：块；
空白：nowrap；
颜色：#446388；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
过渡：所有0.2s线性；
}
.a-btn-slide-text{
位置：绝对位置；
身高：100%；
顶部：0px；
右：20px；
宽度：0px；
背景：#ffffc2；
颜色：#ff0000；
空白：nowrap；
文本对齐：左对齐；
文本缩进：10px；
溢出：隐藏；
线高：28px；
-webkit过渡：宽度0.3s线性；
-moz过渡：宽度0.3s线性；
-o型过渡：宽度0.3s线性；
过渡：宽度0.3s线性；
}
.a-btn：悬停{
背景色：#FD85；
右边填充：130px；
}
.a-btn:hover.a-btn-slide-text{
背景色：#FD85；
宽度：自动；
}

.a-btn{
颜色：#ffffc2；
背景色：#ffffc2；
边框：1px实心#dfdfdf；
左侧填充：20px；
右边填充：20px；
位置：相对位置；
浮动：左；
溢出：隐藏；
-webkit转换：所有0.3s线性；
-moz过渡：所有0.3s线性；
-o-过渡：所有0.3s线性；
过渡：所有0.3s线性；
}
.a-btn-text{
显示：块；
空白：nowrap；
颜色：#446388；
-webkit转换：所有0.2s线性；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
过渡：所有0.2s线性；
}
.a-btn-slide-text{
位置：绝对位置；
身高：100%；
顶部：0px；
右：20px；
宽度：0px；
背景：#ffffc2；
颜色：#ff0000；
空白：nowrap；
文本对齐：左对齐；
文本缩进：10px；
溢出：隐藏；
线高：28px；
-webkit过渡：宽度0.3s线性；
-moz过渡：宽度0.3s线性；
-o型过渡：宽度0.3s线性；
过渡：宽度0.3s线性；
}
.a-btn：悬停{
背景色：#FD85；
右边填充：160px；
}
.a-btn:hover.a-btn-slide-text{
背景色：#FD85；
宽度：自动；
}

---

在css的.a-btn-slide-text部分中，更改行

right: 20px

此属性将文本放置在屏幕之外，我建议将其更改为

.a-btn-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:-2px;

---

解决方案是将宽度更改为最大宽度

.a-btn{
颜色：#ffffc2；
背景色：#ffffc2；
边框：1px实心#dfdfdf；
左侧填充：15px；
右边填充：20px；
位置：相对位置；
浮动：左；
溢出：隐藏；
最大宽度：30px；
-webkit过渡：最大宽度为0.3s，易于进出；
-moz过渡：最大宽度0.3s缓进缓出；
-o型过渡：最大宽度为0.3s，易于进出；
过渡：最大宽度0.3s线性；
}
.a-btn-text{
显示：块；
空白：nowrap；
颜色：#ff0000；
}
.a-btn：悬停{
背景色：#FD85；
最大宽度：300px；
}

我的文本宽度尚未定义的问题。它可以更改，因为我的后端使用gettext进行翻译。当我将padding设置为auto时，它不起作用。谢谢，但我的文本并不总是相同的，这就是问题所在。你还修复了“width:300px；”这怎么可能是一个解决方案？它不是你期望的，对吗？我输入了一个最大宽度，我的文本长度不会超过300px，但我们甚至可以将其定义为100%