0

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

Community
  • 1
  • 1
Becky
  • 5,467
  • 9
  • 40
  • 73

2 Answers2

1

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

Sougata Bose
  • 31,517
  • 8
  • 49
  • 87
  • `word-wrap: break-word;` doesn't adjust the font size to fit its container? I'm looking for a way to fix the text to its div by adjusting its font size. – Becky Apr 21 '15 at 04:39
1

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

Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • but the font size remains the same? Doesn't actually fit the div by adjusting its font size? – Becky Apr 21 '15 at 04:36
  • For that you need to use some `javascript/jquery` which is just some simple lines of code and you can find it **[HERE](http://stackoverflow.com/questions/6112660/how-to-automatically-resize-the-size-of-text-inside-a-div)** – Guruprasad J Rao Apr 21 '15 at 04:39