CODEWITHSUNDEEP
javascriptjquerycss
Becky
Becky

Reputation: 5585

Fit text inside div when borswer is resized

Is it possible to make text inside a div to fit its DIV while the bowser window is resized?

I read this and this and few other about Fit Text to DIV but none of them gives an accepted answer about fit text when browser window is resized.

<div id="wrapper">
    <div class= "tfz">FIT THIS TEXT</div>
</div>

jsFiddle

Upvotes: 0

Views: 84

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

With width given as px, you really cannot resize it, unless you use some javascript/jquery! So if it is really important you to mention width in px you just can achieve it through jquery/javascript.

So if you agree to mention it in % then definitely you can manage it through CSS as below:

#wrapper{
    position: relative;//no need to change this
    width: 50%;
    word-wrap: break-word;//apply this.
    height: auto;
}

DEMO

Upvotes: 1

Sougata Bose
Sougata Bose

Reputation: 31749

Try with - 

word-wrap: break-word;

and set the width in %. Hope that will fix the problem.

Example

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Style

div {
    width: 500px;
    word-wrap: break-word;
    font-size: 2vw;
}

Check it here

Upvotes: 1

Related Questions