All geek questions in one place

How to make text automatically shrink to fit in a div?

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

See the script: 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>
+6
source share
2 answers

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

This is an example of qucik to show you the correct path, so now you can style it as you wish.

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

Remember that to scale the text, the div should always have a percentage width (and, of course, the maximum width if you need it)

Then just use a few media queries to adjust the text position at different resolutions and it should be ready

+3
source

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

this is a fiddle ... http://jsfiddle.net/f6sx474j/ Try to increase the text, I checked it and worked correctly.

 <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>
+1
source

Source: https://habr.com/ru/post/982728/

More articles:


All Articles