How can I reduce font size based on length?

Question

Currently I have some large text on a page, and layout works fine for short text (~12-14 chars in length), but any more than that will overflow or wrap. This is undesirable,

Answer 1

You could try an iterative approach using javascript.

Put the contents into a span with white-space: nowrap. If span is the span within, you can do something like this:

var maxWidth = span.parentNode.clientWidth;
var currentFont = parseInt(window.getComputedStyle(span).fontSize); // or max font size
while(span.offsetWidth > maxWidth) {
    currentFont--;
    span.style.fontSize = currentFont + "px";
}

This will continually decrement the font until the span fits within its parent.

If the allocated width changes as you resize the window, you may need to run this on window resize.