CODEWITHSUNDEEP
htmlcss
Dan Brooks
Dan Brooks

Reputation: 89

HTML - Putting text in some field

I'm trying to create a single sentence in some kind of a field I created, and every time I just make the font bigger it pops out of the field, and I gotta lower the font-size to put it inside again.

Can I make the font size bigger and keep it in the field at the same time? My code:

HTML:

<div id="wrapper">
    <h1 style=""> Nothing Created Yet </h1>
</div>

CSS:

#wrapper {
    width: 1000px;
    height: 120px;
    margin-top: 100px;
    border: 5px solid gray;
    border-radius:500px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial;
    font-size:40px;
    background-color: #F0EEF3;
    border-color:red;
}

What I get:

Upvotes: 1

Views: 81

Answers (4)

dwana
dwana

Reputation: 413

or do -added class to the header and put the margin to 0 and center the text (jsfiddle.net/6GRGH/)

Upvotes: 0

birraa
birraa

Reputation: 440

The reason why this happens is you set fixed width and height for the DIV and when you increase the font size, it could no longer fit inside the DIV. So, the answer is it is impossible in fixed size DIV like this.

Upvotes: 0

Alex Wilson
Alex Wilson

Reputation: 2419

try this DEMO

#wrapper {
    width: 1000px;
    height: 120px;
    margin-top: 100px;
    border: 5px solid gray;
    border-radius:500px;
    margin-left: auto;
    margin-right: auto;
    font-family: Arial;
    font-size:40px;
  line-height:10px;
    background-color: #F0EEF3;
    border-color:red;
  text-align:center;
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

You firstly need to remove the browser-default margin styling on your h1 element:

#wrapper h1 {
    margin: 0;
}

Then you should ideally give your #wrapper element a line-height equal to its height:

#wrapper {
    ...
    height: 120px;
    line-height: 120px;
}

JSFiddle demo.

Upvotes: 3

Related Questions