html – 根据最长文本的大小更改div的宽度

概述我想创建一个按钮,当您将鼠标悬停在该按钮上时,该按钮会显示不同的文本.我希望它是固定宽度,但我不知道最长文本的宽度,因为我将使用 Javascript翻译,可能的内容将有不同的长度. 有没有办法让按钮与CSS最长文本的宽度相同？ 这是一个fiddle. .hover-btn .hover-on,.hover-btn:hover .hover-off { display: none;}.h 我想创建一个按钮,当您将鼠标悬停在该按钮上时,该按钮会显示不同的文本.我希望它是固定宽度,但我不知道最长文本的宽度,因为我将使用 Javascript翻译,可能的内容将有不同的长度.

有没有办法让按钮与CSS最长文本的宽度相同？

这是一个fiddle.

.hover-btn .hover-on,.hover-btn:hover .hover-off {  display: none;}.hover-btn:hover .hover-on,.hover-btn .hover-off {  display: inline;}

<button ID="mybutton" >  <span >hey!</span>  <span >click me!</span></button>

解决方法 一种方法是隐藏元素而不显示：none,所以不要从流中删除它.试试这个：

.hover-btn .hover-on,.hover-btn:hover .hover-off {  height: 0;  display:block;  overflow:hidden;  visibility:hIDden;}.hover-btn:hover .hover-on,.hover-btn .hover-off {  height:auto;  visibility:visible;}

<button ID="mybutton" >  <span >hey!</span>  <span >click me!</span></button>

总结

以上是内存溢出为你收集整理的html – 根据最长文本的大小更改div的宽度全部内容，希望文章能够帮你解决html – 根据最长文本的大小更改div的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。