CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Yacomini
Yacomini

Reputation: 157

How to prevent font falling out of button

I have a button for my page that I'm also styling it

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

And then the css code

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

If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?

Upvotes: 0

Views: 206

Answers (4)

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and 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>

and If you want to know about bootstrap's .btn here is 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;
}

Upvotes: 1

Pranjal
Pranjal

Reputation: 1128

#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;
}

Upvotes: 1

Harinder88
Harinder88

Reputation: 314

if you want to hide overflow of text then use {overflow:hidden} is css code. if you want to keep text but not want to increase with then use {height:auto}

Upvotes: 0

user5201343
user5201343

Reputation:

Don't hardcode a width. Using padding on the left and right sides. Here you go. 

#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;

}

Upvotes: 0

Related Questions