How to make text auto-fix inside a div?

Question

I'm trying to get words inside a div to auto-fit to the size of the div. If the div is small, the words inside the div should shrink to accommodate the div. If the div is big, the words inside the div should stretch to fit the div. How would I accomplish that? Thank you.

#hello {
width: 50px;
height: 50px;
border: 1px solid black;
}

<div id = 'hello'>
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>

possible duplicate of [resize font to fit in a div (on one line)](http://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line) — FiringSquadWitness, Jul 28 '15 at 04:12
Are you saying you want the font-size to change, or text that does not fit to be cut-off? — TomDillinger, Jul 28 '15 at 04:12

score 2 · Accepted Answer · answered Jul 28 '15 at 04:13

Use, css property:

text-align: justify;
text-justify: inter-word;

Snippet:

#hello {
  width: 200px;
  border: 1px solid black;
  text-align: justify;
  text-justify: inter-word;
}

<div id='hello'>
  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
  Hello Hello Hello
</div>

score 0 · Answer 2 · answered Jul 28 '15 at 04:13

You can put overflow: scroll; so that div will get scrolls and content will be inside the div.

#hello {
width: 50px;
height: 50px;
border: 1px solid black;
overflow: scroll;
}

<div id = 'hello'>
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>

score 0 · Answer 3 · answered Jul 28 '15 at 04:18

0

Try this code, hope it will help you.

CSS:

<style>
    #hello {
        border: 1px solid black;
        display: inline-table;
        height: 50px;
        padding: 1%;
        width: 25%;
    }
</style>

HTML:

<div id='hello'>
    Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    Hello Hello Hello
</div>

JSFiddle: http://jsfiddle.net/mananpatel/zt3qbsa9/

answered Jul 28 '15 at 04:18

Mr.Happy

2,639
9
40
73

No, the words do not get bigger with the increase of the div, nor the decreasing of the div. – frosty Jul 28 '15 at 04:21
Kindly elaborate what you want. I don't understand. – Mr.Happy Jul 28 '15 at 04:24

How to make text auto-fix inside a div?

3 Answers3

CSS:

HTML: