How to Reduce Font Size Based on Length

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

• vw (% of the viewport width)
• vh (% of the viewport height)
• vi (1% of the viewport size in the direction of the root element's inline axis)
• vb (1% of the viewport size in the direction of the root element's block axis)
• vmin (the smaller of vw or vh)
• vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

How can I reduce font size based on length?

FitText does work with a fluid width.

From the github page :

Make sure your container has a width!
display: inline elements don't have a width. Use display: block OR display: inline-block+ a > specified width (i.e. width: 100%).

Bold is mine for emphasis.

Looking on the homepage for FitText also reveals that there are no fixed width units in sight.

I should also mention that there is not a native CSS technique to achieve this. The closest thing would possibly be viewport relative lengths but that doesnt solve your problem.

My additional opinion (danger beware) :
In my experience when you are confronted with a problem like this, its because you may be looking at things a little wrong from the design side, And if you require Javascript for your layout to stay intact, I do think that needs to be reconsidered. Nursing a design along is usually better than banging it into place with a crowbar.
End Opinion

Pure CSS to make font-size responsive based on dynamic amount of characters

Note: This solution changes based on viewport size and not the amount of content

I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/
and
https://medium.com/design-ux/66bddb327bb1

Resize font depending on string length

You should make familiar with using plugins, they save you much time and of course they're very reliable (they are written by experienced scripters/programmers and have been tested by community). However looks like you want some pure JS solution. I've just made this code for you. It works fairly OK (although I'm not sure if it's as good as some plugins). The only requirement is the element (which you want to adjust the font-size accordingly to the text length) should contain plain text, not some HTML code.

The idea to implement it using pure JS is simple, you need some dummy element created using script, this dummy element is used to measure the size of the text. We need to adjust the font-size of the dummy element until the size of the text (as well as of the dummy element) should be confined to the size of the element (whose font-size you want to adjust). I made the code very clearly, hope you understand it better after reading the code:

//we just need 1 dummy element for the whole page.
var dummy = document.createElement('div');
dummy.className = 'dummy';
var inSingleLineMode, inMultilineMode;    
//function used to adjust the font-size of the element
//so that the width is fixed (single-line mode) or both the width and height are 
//fixed (multi-line mode), of course the text should be contained within 
//the fixed width and height.
function adjustFontSize(element, singleLine){
  if(!element.innerHTML) return;
  var elementStyle = getComputedStyle(element);        
  dummy.style.font = elementStyle.font;
  initMode(singleLine, function(){ dummy.style.width = elementStyle.width });
  dummy.style.padding = elementStyle.padding;
  dummy.style.boxSizing = elementStyle.boxSizing;
  dummy.innerHTML = element.innerHTML;
  document.body.appendChild(dummy);
  var dummyStyle = getComputedStyle(dummy);          
  while(singleLine ? parseInt(dummyStyle.width) < parseInt(elementStyle.width) :
                     parseInt(dummyStyle.height) < parseInt(elementStyle.height)){
    dummy.style.fontSize = parseFloat(dummyStyle.fontSize) + 1 + 'px';
    dummyStyle = getComputedStyle(dummy);
  }
  while(singleLine ? parseInt(dummyStyle.width) > parseInt(elementStyle.width) :
                     parseInt(dummyStyle.height) > parseInt(elementStyle.height)){
    dummy.style.fontSize = parseFloat(dummyStyle.fontSize) - 1 + 'px';
    dummyStyle = getComputedStyle(dummy);
  }    
  element.style.fontSize = dummyStyle.fontSize;
  document.body.removeChild(dummy);
}
function initMode(singleLine, callback){
  if(!dummy) return;
  if(singleLine&&!inSingleLineMode) {
    dummy.style.whiteSpace = 'nowrap';
    dummy.style.width = 'auto';
    dummy.style.display = "inline-block";
    inSingleLineMode = true;
    inMultiLineMode = false;
  } else if(!singleLine&&!inMultilineMode) {
    if(callback) callback();
    dummy.style.whiteSpace = 'initial';
    dummy.style.display = "block";
    dummy.style.wordWrap = 'break-word';
    inMultilineMode = true;
    inSingleLineMode = false;
  }
}

Demo.

In the demo, you can see that the first menu #menu1 is the Vietnamese word meaning Chrysanthemum while the second menu #menu2 is of course the English word Chrysanthemum. They have much different length, however both are supposed to have fixed width of 100px, hence the second menu #menu2 should have smaller font-size to fit the space.

Reduce font-size based on text length

There are a couple of ways you can achieve this.

Conditional Formatting Rules

Right-click on your text-box and select Conditional Formatting... Create a new rule and set your condition like this:

Then click on the style builder for this condition and make the font adjustments:

You can add as many rules as you want.

Here's the documentation: https://docs.telerik.com/reporting/expressions-conditional-formatting

HTMLTextBox

The other way to apply conditional formatting is through the use of an HTMLTextBox. There you can include html markup in the value of the box and it will be rendered (with some limitations):

 =Iif(Len(Fields.Description) > 20,
     "<span style='font-size:8px'>" + Fields.Description + "</span>",
     "<span style='font-size:12px'>" + Fields.Description + "</span>")

For more information on that: https://docs.telerik.com/reporting/report-items-html-text-box

Adjust font size based on text length and window resize

<div id="cont" style="font-family: Verdana; background-color: #ccc;">
    <div id="textContent">fox jump over the lazy dog...fox jump over the lazy dog...fox jump over the lazy dog</div>
</div>  
<script>
    var textContainer = document.getElementById('cont');
    var text = document.getElementById('textContent');
    var textLength = text.innerText.length;
    var firstLoadWidth;

    if (textLength >= 1 && textLength < 40) {
        cont.style.fontSize = '26px';
    }
    else if (textLength >= 1 && textLength < 60) {
        cont.style.fontSize = '24px';
    }
    else if (textLength >= 1 && textLength < 100) {
        cont.style.fontSize = '22px';
    }
    else if (textLength > 100) {
        cont.style.fontSize = '20px';
    }

    window.addEventListener('load', function () {
        firstLoadWidth = window.innerWidth;
    });
    window.addEventListener('resize', function () {
        var getSize = window.innerWidth / firstLoadWidth;
        getSize <= 1 ? text.style.fontSize = getSize + 'em' : text.style.fontSize = '1em';
    }, false);
</script>

---

Related Topics