如何防止字體鬧翻按鈕

的我有我的網頁上的按鈕，我自己也是其樣式，如何防止字體鬧翻按鈕

<button id="logButton" >Iniciar sesión</button>

然後CSS代碼

#logButton 
{ 
    width:119px; 
    margin-bottom: 5px; 
    padding-top: 3px; 
    margin-left:35%; 
    height: 25.5333px; 
    font-weight: bold; 
    font-size: 13px; 
    font-family: helvetica, arial, sans-serif; 
}

Here's a fiddle also。

如果我添加引導類btn它不會這樣做，並且字體大小和按鈕的寬度都不會改變，我的問題是引導程序如何保持文本到位？

來源

2016-09-23 Yacomini

這是一個元素的自然行爲，有固定的高度和寬度，內容總是會溢出，最好使用min-width和min-height 。

#logButton 
 
{ 
 
    min-width:119px; 
 
    margin-bottom: 5px; 
 
    padding-top: 3px; 
 
    margin-left:35%; 
 
    min-height: 25.5333px; 
 
    font-weight: bold; 
 
    font-size: 13px; 
 
    font-family: helvetica, arial, sans-serif; 
 

 
}

<button id="logButton" >Iniciar sesión Iniciar sesión</button>

，如果你想了解bootstrap's.btn這裏是CSS：

.btn { 
    display: inline-block; 
    padding: 6px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    font-weight: 400; 
    line-height: 1.42857143; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    -ms-touch-action: manipulation; 
    touch-action: manipulation; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    background-image: none; 
    border: 1px solid transparent; 
    border-radius: 4px; 
}

來源

2016-09-23 13:23:03

#logButton 
{ 
    /* Removed height & width*/ 
    padding: 10px 20px; /* Added */ 
    margin-bottom: 5px; 
    margin-left:35%; 
    font-weight: bold; 
    font-size: 31px; 
    font-family: helvetica, arial, sans-serif; 
}

來源

2016-09-23 13:18:43 Pranjal

不要硬編碼寬度。在左側和右側使用填充。幹得好。

#logButton 
{ 
    padding: 3px 15px 0 15px; 
    margin-bottom: 5px; 
    margin-left:35%; 
    height: 25.5333px; 
    font-weight: bold; 
    font-size: 13px; 
    font-family: helvetica, arial, sans-serif; 

}

來源

2016-09-23 13:21:00 harryparkdotio

如果你想隱藏文本溢出，然後使用{overflow：hidden}是CSS代碼。如果你想保留文本，但不希望增加與再使用{高度：汽車}

來源

2016-09-23 13:21:28 Harinder88

如何防止字體鬧翻按鈕

回答

相關問題