2

I have data coming in JSON format and I need to render the data on the Web browser. There will be many div containers where I need to render the text also. All the div containers may be of different dimensions. The text that goes inside this div container will also be dynamic. I need to set the font size in such a way that, the text should be big enough occupying as much as possible space inside the div container and also text should not be clipped.

The challenge here is the text length. If it is a bigger text, then the font size should automatically reduce so that it will still fit inside the div container without data being clipped.

Please let me know if there is any way of achieving this.

Sheshadrinath R
  • 99
  • 2
  • 8

2 Answers2

3

CSS Tricks to the rescue again: http://css-tricks.com/set-font-size-based-on-word-count/

Per that link you can detect/set word limits and then add an inline font size declaration to suit: 

$(function(){

var $quote = $(".post p:first");

var $numWords = $quote.text().split(" ").length;

if (($numWords >= 1) && ($numWords < 10)) {
    $quote.css("font-size", "36px");
}
else if (($numWords >= 10) && ($numWords < 20)) {
    $quote.css("font-size", "32px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
    $quote.css("font-size", "28px");
}
else if (($numWords >= 30) && ($numWords < 40)) {
    $quote.css("font-size", "24px");
}
else {
    $quote.css("font-size", "20px");
}    

});
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Nathan Jan 02 '15 at 06:50
  • Awesome! (P.S. My earlier comment was posted via the post review system, I didn't type it out myself.) – Nathan Jan 02 '15 at 08:39
  • All good, and it's a fair point! I'll be more thorough in my answers in future. :) – Nathaniel Flick Jan 02 '15 at 08:42
  • Hi @Nathan totally agree though I have provided the actual code too so it won't matter if the link goes away. – Nathaniel Flick Aug 09 '17 at 03:29
1

You can use jQuery TextFill

This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible

Usage From Official site:

Remember to include jQuery and jQuery TextFill:

<script src="jquery.min.js"></script>
<script src="jquery.textfill.min.js"></script>

Select which element you'll use. Make sure to: Specify the parent's width and height. Put the text inside of a child by default (see Options to change this)

<div id='my-element' style='width:100px;height:50px;'>
  <span>The quick brown fox jumps over the lazy dog</span>
</div>

Initialize jQuery TextFill

 <script>
$(function() {
    $('#my-element').textfill({

    });
});
</script>

Fiddle Demo

Aminul
  • 1,738
  • 2
  • 24
  • 42
  • Finally I had to calculate the best fit font size in the recursive way. I created a dummy div element and added the text inside. Compared both actual and dummy element width. From there onwards until the width of both elements becomes equal or dummy element width becomes smaller than the original one, I kept reducing the font size. Once the above criteria is met, then we can consider current font size as the best fit font size. This may not be perfect w.r.t performance. But this gives more accurate result. – Sheshadrinath R Feb 20 '15 at 11:23