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

我想创建一个按钮，当您将鼠标悬停在其上时显示不同的文本。我希望它是固定宽度，但我不知道可能的最长文本的宽度，因为我将使用Javascript翻译，并且可能的内容将具有不同的长度。根据最长文本的大小更改div的宽度

有没有一种方法可以使按钮的宽度与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" class="hover-btn"> 
 
    <span class="hover-off">hey!</span> 
 
    <span class="hover-on">click me!</span> 
 
</button>

来源

2016-09-29 QOI

**电话** ..... CSS只能风格什么是真正在那里。它无法知道你以后插入的文本**。 –

如果您使用的是javascript，为什么不用javascript来改变按钮的宽度？ –

的一种方式是隐藏元件而不display: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" class="hover-btn"> 
 
    <span class="hover-off">hey!</span> 
 
    <span class="hover-on">click me!</span> 
 
</button>

来源

2016-09-29 15:41:34 DaniP

有新奇而精湛的思想！ – kukkuz

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

回答

相关问题