如何防止字体闹翻按钮

的我有我的网页上的按钮，我自己也是其样式，如何防止字体闹翻按钮

<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

如何防止字体闹翻按钮

回答

相关问题