我想在按钮上显示更多文本,我希望按钮随着扩展文本缩小和增长.
我需要一个通用的解决方案,因为按钮上的文本因此其宽度将取决于用户对语言的选择.
这是我(目前没有工作)的尝试
.hover-value {
display: inline-block;
visibility: collapse;
width: 0%;
-webkit-transition: width 2s;
transition: width 2s;
overflow: hidden;
}
button:hover .hover-value {
visibility: visible;
width: 100%;
}同样在JsFiddle：https://jsfiddle.net/JohanGovers/46392xss/
我在我的项目中使用jQuery和bootstrap但是如果可能的话想用css解决这个问题.我已尝试使用其他SO答案中建议的可见性属性,但无济于事.
任何帮助将不胜感激.
最佳答案
对于最好的动画,我决定为max-width属性设置动画.这是因为,目前,您无法为width：auto设置动画.
(将max-width：7rem设置为大于文本长度的值.)
为了避免一堆对齐CSS,我使用了display：inline-flex,因为它完全对齐它而不使用vertical-align和诸如此类的东西. (如果这是一个问题,可以更改.)
然后我使用了white-space：nowrap将所有文本强制放到一行上,这样它就可以更加流畅地进行动画处理.
button span {
max-width: 0;
-webkit-transition: max-width 1s;
transition: max-width 1s;
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
button:hover span {
max-width: 7rem;
}