修改按鈕寬度以適合文本寬度

我已經有一個按鈕，其中包含一些文本，並且該按鈕的文本太長，因此它會自動換行到下一行。由於我有固定的按鈕高度，因此按鈕中的第二行文本是隱藏的，因爲溢出未設置爲可見。修改按鈕寬度以適合文本寬度

有沒有一種方法來設置按鈕來改變它的寬度，使它只要裏面的文字？

我現在的CSS：

.block .btn { 
    background-color: #464646; 
    color: #fff; 
    border:none; 
    height: 30px; 
    font-family: 'Segoe UI'; 
    font-size: 16px; 
    cursor: pointer; 
} 
.block .btn:hover{ 
    background-color: rgba(40, 40, 40, 255) 
}

編輯：

發現我的問題：有在風格寬度設定一些吃剩的造型=「」在HTML實際按鈕的特性。 CSS本身沒有任何問題。無論如何感謝您的答案！

來源

2014-03-28 Sammy Sammon

它一點很難說清楚沒有提供更多的CSS或HTML ...但是這可能是由於空白的包裝，儘量按鈕

例如設置white-space到nowrap

button{ 
    white-space:nowrap; 
}

per MDN

空白CSS屬性用於描述如何空白裏面的元素進行處理。

來源

2014-03-28 09:51:01 SW4

它成功地阻止了它的包裝，但是按鈕的寬度並沒有增加，所以文本有點就離開了按鈕並且到了現在：（ –

由於父容器的限制，這樣的聲音正在發生。它很難幫助沒有HTML/CSS，但看到你找到你的解決方案:) – SW4

您正在修復按鈕的height。請嘗試使用min-height以防文字需要更高的高度。

來源

2014-10-15 16:24:05

修改按鈕寬度以適合文本寬度

回答

相關問題