Javascript Css动画扩展悬停时的按钮文本

我想在按钮悬停时显示更多文本，并希望按钮随着扩展文本收缩和增长

我需要一个通用的解决方案，因为按钮上的文本及其宽度将取决于用户选择的语言

这是我（目前不工作）的尝试

。悬停值{
显示：内联块；
能见度：塌陷；
宽度：0%；
-webkit过渡：宽度2s；
过渡：宽度2s；
溢出：隐藏；
}
按钮：悬停。悬停值{
能见度：可见；
宽度：100%；
}

结果
添加新结果

尝试这种方法，您将获得您喜欢的输出

。悬停值{
显示：内联块；
/*能见度：塌陷*/
-webkit过渡：宽度2s；
过渡：宽度2s；
溢出：隐藏；
显示：无；
顶部：3px；
位置：相对位置；
}
按钮：悬停。悬停值{
能见度：可见；
显示：内联块；
}

结果
添加新结果

完成，但带有古怪的动画：

已更新-由于jaunt，他建议添加此

空白：nowrap，现在结果平滑到css按钮



按钮{
宽度：53px；
高度：21px；
溢出：隐藏；
-webkit过渡：宽度1s；
过渡：宽度1s；
空白：nowrap；/*这是jaunt建议的，谢谢*/
}
按钮：悬停{
宽度：145px；
-webkit过渡：宽度1s；
过渡：宽度1s；
}
按钮：悬停：：之后{
内容：“添加新结果”；
}
这就是我目前掌握的。
结果
您可以对字体大小产生类似的效果

将其从0px更改为继承或指定大小

.hover-value {
    font-size: 0px;
    -webkit-transition: font-size 1s;
    transition: font-size 1s;
}

button:hover .hover-value {
    font-size: inherit;
}

请参阅JSFIDLE上的e。
我希望这会对您有所帮助，我已经在底部共享了JFIDLE链接供您参考，但将相关代码粘贴在这里

body{
    margin:0;
    padding:0;
}

h3{
    margin:0;
    padding:0;
    line-height:1.5em;
}
button{
   text-align:left;
   width:7.5em; 
   overflow:hidden;
   transition:width 1s ease-in-out;
}
button:hover{
     width:20em;
     transition:width 1s ease-in-out;
}
button:focus{
    outline:none;
}
button span.sthGroup{
    display:block;
    width:20em;
    overflow-x:hidden;
}
</style>

<h3>button</h3>
<button class="" type="button">
    <span class="sthGroup">
        <span>some text here</span>
        <span>some additional text here</span>
    </span>
</button>

正文{
保证金：0；
填充：0；
}
h3{
保证金：0；
填充：0；
线高：1.5em；
}
钮扣{
文本对齐：左对齐；
宽度：7.5em；
溢出：隐藏；
过渡：宽度1s，易于进出；
}
按钮：悬停{
宽度：20em；
过渡：宽度1s，易于进出；
}
按钮：焦点{
大纲：无；
}
按钮span.sthGroup{
显示：块；
宽度：20em；
溢出x：隐藏；
}
按钮
这里有一些文字
这里有一些附加文本

为了获得最好的动画效果，我决定设置
max width
属性的动画效果。这是因为，目前无法在
width:auto
之间设置动画

（将
max width:7rem
设置为大于文本长度的值。）

为了避免一堆对齐CSS，我使用了
display:inline flex
，因为它完全对齐了CSS，而没有使用
vertical align
等等。（如果这是一个问题，可以更改。）

然后，我使用了
空白：nowrap
将所有文本强制放在一行上，使其动画更流畅


按钮跨度{
最大宽度：0；
-webkit过渡：最大宽度1s；
过渡：最大宽度1s；
显示：内联块；
垂直对齐：顶部；
空白：nowrap；
溢出：隐藏；
}
按钮：悬停范围{
最大宽度：7雷姆；
}

结果
新结果
结果
不同文本
Nice one，试着改变跨度的宽度，这样看起来会更好。fix width attributes是危险的。当文本长度改变时会发生什么？！因为上面说的是“添加新结果”，所以我认为他不会动态地更改按钮的文本，如果他愿意，他可以更改宽度，增加字体大小的唯一问题是动画看起来有点复杂childish@Mi-创意谢谢你的编辑，是的，那是个错误。：）如果添加
空白：nowrap
到
按钮
然后文本被强制放在一行上，这会导致你的“古怪”动画。@jaunt，非常感谢，我从来没有遇到过需要它的问题，这就是为什么我从来没有想到它，谢谢你提醒我！谢谢，这在Chrome和IE 10+中运行良好，但在Firefox 42.0中文本不对齐。你知道如何解决这个问题吗？啊，这可能与
内联flex
有关，更新后的答案能解决问题吗？是的。非常感谢你。