Setting the maxlength of text in an element that is displayed

Question

I have an element with an id of templateDescription that receives values arriving through a database. I would like to set a maximumlength of the text that is displayed in the view for each entry on the home page because I have a "read more" button that is responsible for opening up a modal that will contain more information about the page. How would be the best approach for this?

Answer 1

HTML5 introduces a new maxlength attribute for input elements.

It looks like this

<input type="text" maxlength="10" />

This will limit the length of a text field to 10 characters.

For other elements, it might be best to set a width and then use the text-overflow property. You'll also want to add the overflow and white-space properties. It looks like this

 div { width: 100px; white-space: nowrap; border: 1px solid black; text-overflow: ellipsis; overflow: hidden; } 

 <div>This is a really really long sentence</div>