Font-size depending on character length?

Asked
Active3 hr before
Viewed126 times

7 Answers

lengthdependingcharacter
90%

Please explain the behavior of these parameter expansions using IFS? , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,I'm trying to adjust title sizes depending on character length. (wordpress),Making statements based on opinion; back them up with references or personal experience.

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

Just simply take the length of the string, instead of splitting it by whitespace like he is doing.,I just love finding these snippets, good idea and thanks for the share.,Something like (but after a lot more optimization, obvs):,Set the font-size based on that count.

Doing it with MooTools

window.addEvent('domready', function() {

   $quote = $$('.post p')[0];

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

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

Doing it with jQuery

$(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");
   }

});
load more v
72%

Is it possible to change the div's font-size depending on how many characters are in it? I have image album titles in small fixed width div's (100px). Sometimes the album names have too many characters that they force a new line. So I was wondering if it is possible to re-size the font to keep the title on one line?,Both. Relative for main body text that users are going to have to read a lot of (so they'll want to be able to read it comfortably); Absolute for text that has to be sized to match other elements on the page that are sized in pixels, such as images.,Nope, this is not possible. It is complex and difficult to find out the actual used font from a font-family list even in JavaScript - it's impossible in pure CSS.,(ETA: Note that since this answer, CSS3 has redefined the ‘physical units’ so that px and pt are always proportional. So this problem no longer matters unless you are concerned about very old browsers.)

In your css:

.longstring {
   font - size: 10 pt;
}
.shortstring {
   font - size: 14 pt;
}

In your view

<?php
$random_number = '42';
if(strlen($div_string)>$random_number){
    $font_class = 'longstring';
}else{
    $font_class = 'shortstring';
}?>
<div class="<?php echo $font_class; ?>">
    <?php echo $div_string; ?>
</div>
load more v
65%

There are several ways to specify the font size, including keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs of the particular web page.,In order to calculate the em equivalent for any pixel value required, you can use this formula:,Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.,The font-size property is specified in one of the following ways:

/* <absolute-size> values */
   font-size: xx-small;
   font-size: x-small;
   font-size: small;
   font-size: medium;
   font-size: large;
   font-size: x-large;
   font-size: xx-large;
   font-size: xxx-large;

   /* <relative-size> values */
      font-size: smaller;
      font-size: larger;

      /* <length> values */
         font-size: 12px;
         font-size: 0.8em;

         /* <percentage> values */
            font-size: 80%;

            /* Global values */
            font-size: inherit;
            font-size: initial;
            font-size: revert;
            font-size: unset;
load more v
75%

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,If you have 100+ or 1000+ chars you can also make a function that receives the length and returns a CSS class, then style base on those ranges.,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:,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.

Say you have this:

<div id="outer" style="width:200px; height:20px; border:1px solid red;">
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

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();
   }
}
$(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();
   }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>
load more v
40%

Set the font size for different elements:,The font-size property sets the size of a font.,HTML DOM reference: fontSize property,CSS reference: font property

Definition and Usage

The font-size property sets the size of a font.

font - size