根據最長文本的大小更改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的寬度

回答

相關問題