Setting a max character length??

[tim cross]

I wonder if someone could tell me the best way to set a maximum character length which I will need to be able to change, depending on the size of desktop/tablet/mobile etc

<p>Setting a max character length???????????????????????????????????????????? </p>

I have seen a few things on the web but not sure how to add them

------

Note: just change #your-div-id and put your div ID.

var myDiv = $('#your-div-id');

myDiv.text(myDiv.text().substring(0,300))

-----

Thanks

Tim

[BenPleysier]

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

[osgood_]

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>

[pziecina]

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

[tim cross]

Thank you all, that's perfect, there is always too many options to choose from!

[Jon Fritz]

Is it a single line of text you want to truncate as the viewport makes its container smaller?

If so, you could use the following, which will add ... at the natural clipping point of any browser/device as the viewport shrinks up...

.textDiv {

  white-space: nowrap;

  width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

}

<div class="textDiv">All of your text, whatever the length, would be forced into a single line and truncated with a ... wherever it would normally be clipped by the overflow:hidden setting, dependent on the browser or device width</div>

[osgood_]

pziecina  wrote

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

I'm not sure the OP is setting the width of the container, as I read it they are trying to limit the number of characters viewable in a block of text inside a container.

[pziecina]

osgood_  wrote

I'm not sure the OP is setting the width of the container, as I read it they are trying to limit the number of characters viewable in a block of text inside a container.

That does not make sense, as it would depend on the width of the device, which is a complete unknown and would only be applicable per line, with any overflow of each line being truncated.

But then again what do I know .

[osgood_]

pziecina  wrote

That does not make sense, as it would depend on the width of the device, which is a complete unknown and would only be applicable per line, with any overflow of each line being truncated.

But then again what do I know .

Dont know, I'm thinking more of a block of default text with say 100 characters in it that needs to be reduced to 75 characters for tablet and 25 for smart phone for example.

Can we have another vote please as I didnt like the outcome of the first one.