dynamically changing the size of font size based on text length using css and html

问题:

I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.

I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.

回答1:

Say you have this:

     
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec
 
 

Then you can do something like:

$(document).ready(function () {     resize_to_fit(); });  function resize_to_fit(){     var fontsize = $('div#outer div').css('font-size');     $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);      if($('div#outer div').height() >= $('div#outer').height()){         resize_to_fit();     } } 

Working Sample

$(document).ready(function() {   resize_to_fit(); });  function resize_to_fit() {   var fontsize = $('div#outer div').css('font-size');   $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);    if ($('div#outer div').height() >= $('div#outer').height()) {     resize_to_fit();   } }

 
   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec
 

回答2:

Getting the size in pixels of a string of text is a hard thing to do and depends a lot on the browser and the user's settings, so it will probably be hard to come up with a solution that works in all cases.

By "display user entered text" do you mean the user is typing into a textbox? If so, you can attach a keypress listener that checks the length of the value of the text, then adjusts the font-size accordingly. Here's an example, though you will probably need to change the lengths and font-sizes to meet your needs:

Working Demo

$('#text').on('keypress', function(e) {     var that = $(this),         textLength = that.val().length     ;      if(textLength > 30) {         that.css('font-size', '5px');     } else if(textLength > 20) {         that.css('font-size', '10px');     } else if(textLength > 10) {         that.css('font-size', '15px');     } }); 

回答3:

       
         
I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible. I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.
     
   

回答4:

Whoever wants a dynamic function that depends on the width of the element (based on putvande answer):

        $(document).ready(function () {             var arrEl = ['div1', 'div2', 'div3'];             resize_to_fit(arrEl);         });          function resize_to_fit(arr){             for (var el in arr) {                 var jEl = $('.' + arr[el] + ' span');                 var fontsize = jEl.css('font-size');                 jEl.css('fontSize', parseFloat(fontsize) - 1);                 if (jEl.width() >= $('.' + arr[el]).width()){                     resize_to_fit([arr[el]]);                 }                     }         } 

and the HTML:

     Lorem Ipsum 
 
     Lorem Ipsum 2 
 
     Lorem Ipsum 3 
 

whith CSS:

.div1, .div2, .div3 {     width: 207px;     white-space: nowrap; } 

Notice you only set font-size to span inside, and not to the outer div.

回答5:

Thanks putvande for letting me know the general method. Here is an improved version.

1. Get rid of the callback hell.
2. Fixed some bugs may cause page hang.

Same HTML:

     
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec
 
 

Here is the function:

resize_to_fit($('#outer'), $('#outer div'));  function resize_to_fit(outer, inner) {     while(inner.height() > outer.height()) {         var fontsize = parseInt(inner.css('font-size')) - 1;         inner.css('font-size', fontsize);         // some browsers(chrome) the min font return value is 12px         if(fontsize = fontsize+1)             break;     } } 

回答6:

If by text length you mean character count, there is this article which points to a short jquery snippet Change Font Size dynamically based on Character count

http://jsfiddle.net/jfbrLjt2/

 $('.text').each(function(){  var el= $(this);    var textLength = el.html().length;     if (textLength > 20) {         el.css('font-size', '0.8em');     } }); 

文章来源: dynamically changing the size of font size based on text length using css and html