Setting The Maxlength Of Text In An Element That Is Displayed

- 1 answer

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?



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>