Highlighted

Setting a max character length??

Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

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

Views

716

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Setting a max character length??

Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

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

Views

717

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 04, 2019 1
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1
Explorer ,
Apr 04, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
Adobe Community Professional ,
Apr 04, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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 .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 0
osgood_ LATEST
LEGEND ,
Apr 04, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 04, 2019 1