html - 如何防止字体从按钮上掉出来

Question

我的页面有一个按钮，我也在设计它的样式

<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 .

如果我添加 bootstrap 类 btn，它不会那样做，字体大小和按钮宽度都不会改变，我的问题是bootstrap 做了什么来保持文本在原位？

Answer 1

这是元素的自然行为，固定高度和宽度，内容总是溢出，最好使用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;
}