Skip to main content
Inspiring
April 4, 2019
Question

Setting a max character length??

  • April 4, 2019
  • 3 replies
  • 1577 views

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

This topic has been closed for replies.

3 replies

pziecina
Braniac
April 4, 2019

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 crossAuthor
Inspiring
April 4, 2019

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

Jon Fritz
Braniac
April 4, 2019

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>

Braniac
April 4, 2019

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>

BenPleysier
Braniac
April 4, 2019

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

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!