Setting a max character length??

Why use javascript when you can set the width of the container for the text using css calc() for the width value?

e.g.

in each media query set the width you require by dividing the viewport width by the charachter size -

width: calc(100vw / 1em);

the 1em is only an example and would be the size you have set for the font-size. You cannot use px sizes though.

There is also a property that does allow you to set a min/max value, but they are only now being supported in alpha versions of browsers.

https://www.w3.org/TR/css-values-4/#math-function

Can you explain a little more. Usually you would set a max-character length for a form input box where you want to limit the user to a specific amount of characters....................I'm not clear why you are showing a <p></p> as an example?

Ok I think I might have it. You have a block of text and you want to limit the amount of characters on various different devices?

Desktop

The quick brown fox jumped over the lazy dog.

Tablet

The quick brown fox jumped ov........

Smart Phone

The quick brown fo.......

Is that it?

If that is the case then try the below javascript and set how many characters you want to appear at different window widths (the default is desktop, which is 30 characters):

<p><span class="limitText"> The quick brown fox jumped over the lazy dog</span>.....</p>

<script>

var windowWidth = window.innerWidth;

var limitChar = 30;

if(windowWidth < 768) {

var limitChar = 20;

}

if(windowWidth < 480) {

var limitChar = 10;

}

var limitText = document.querySelector('.limitText');

sliceText = limitText.innerHTML.slice(0, limitChar);

limitText.innerHTML = sliceText;

</script>

Using media queries you could use one of the examples in Line Clampin' (Truncating Multiple Line Text) | CSS-Tricks