How do I make the text shrink automatically to fit in the div?

Question

I know i can adjust the font size, but I want it to shrink to fit the div automatically when it is viewed on a different platform which reads font sizes differently for example.

See the fiddle: http://jsfiddle.net/08pyzgx4/

<body>
    <div style="width:600px; height:58px; max-width: 600px; background-image:url(http://itrace.co.za/images/emailfiles/banner.png);     background-repeat:no-repeat; display:block; max-width: 600px; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#000;     text-align:center; padding-top:12px;"><b>Bla Bla Bla Bla Bla Bla </b>

        <div style="height:16px; max-height:16px; padding-left:88px; padding-right:88px; margin-top:18px; font-size:0.6em; letter-spacing:-0.02em; position:relative;"><strong>Website: </strong>www.blabla.co.za | <strong>E-mail: </strong>info@blabla.co.za | <strong>Control Centre: </strong>08600-22-blabla</div>
    </div>
</body>

Forgot to mention, I'm referring to the text underneath the heading... — Chips147, Feb 19 '15 at 10:08
So use `em` instead of `pixel`, it will refers to the normalized font size and will adjust to it. — Anwar, Feb 19 '15 at 10:13
There are as many duplicates as there are ways to do this. If you want a css only solution you can use vh/vw units. — web-tiki, Feb 19 '15 at 10:15
http://jsfiddle.net/08pyzgx4/2/ ....check this is this ok.... — Abdul Muheet, Feb 19 '15 at 10:17
@Abdul, white-space:nowrap; almost does the trick, but now the text overlaps the banner. — Chips147, Feb 19 '15 at 10:31
welcome...if you want to use jquery i can make that for you? — Abdul Muheet, Feb 19 '15 at 12:42
yeah of course.... i am on way going to hostel ...i will do it when i reached. — Abdul Muheet, Feb 19 '15 at 12:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71289/discussion-between-abdul-muheet-and-chips147). — Abdul Muheet, Feb 19 '15 at 19:28

score 4 · Accepted Answer · answered Feb 19 '15 at 19:27

You can do it like this....and don't forget to add js library.

this is the fiddle...http://jsfiddle.net/f6sx474j/ Try by increasing the text i checked it and its working properly.

<div style="width:600px; 
height:58px;
max-width: 600px;
background-image:url(http://itrace.co.za/images/emailfiles/banner.png); 
background-repeat:no-repeat;
display:block; max-width: 600px;
font-family:Arial, Helvetica, sans-serif; 
font-size:19px; color:#000;     
text-align:center; padding-top:12px;">
<b>Bla Bla Bla Bla Bla Bla </b>
<div id="abc" style="height:16px;
 display: inline-block; 
 max-height:16px; 
 padding-left:88px;
 padding-right:88px; 
 margin-top:18px; 
 font-size:0.6em; 
 letter-spacing:-0.02em;
  position:relative;">
<strong>Website: </strong>www.blabla.co.za |
 <strong>E-mail:   </strong>
 info@blabla.co.za info@blabla.co.za info@b
 <strong>Control Centre: </strong>
 08600-22-blabla</div>
</div>

//And this is your js

<script type="text/javascript">
$(function() {
var div = $('#abc');
var fontSize = parseInt(div.css('font-size'));
do {
    fontSize--;
    div.css('font-size', fontSize.toString() + 'px');
    } while (div.width() >= 400);
   });
 </script>

score 3 · Answer 2 · answered Feb 19 '15 at 10:13

3

You should set width as 100% and max-width as value (600px in you case).

This is a qucik example just to show you the right way, so now you can style it as you like.

http://jsfiddle.net/08pyzgx4/1/

Remember that for scaling text, the div should always have a percentage width (and off course a max-width if you need one)

Then just use a couple of media queries to adjust the text position on different resolutions and it should be ready

answered Feb 19 '15 at 10:13

Nick

13,493
8
51
98

Thanks, is there any way to make the contact info stay as one line by shrinking in font size? – Chips147 Feb 19 '15 at 10:24
1

check this SO answers: http://stackoverflow.com/questions/15649244/responsive-font-size http://stackoverflow.com/questions/13358181/resize-font-size-according-to-div-size http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container, but it seams like is not really possible with only css – Nick Feb 19 '15 at 10:25
Hmm, thank you. Yes it's as I feared, and I am also limited to inline css because this is destined to be a mass email.... – Chips147 Feb 19 '15 at 10:27
Remember to mark the answer if this was usefull for you. :) – Nick Feb 19 '15 at 10:28
Now i'm screwed as I can't add media queries inline :( – Chips147 Feb 19 '15 at 10:40
1

have a look at this example: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978 – Nick Feb 19 '15 at 10:54

How do I make the text shrink automatically to fit in the div?

2 Answers2