Setting the maxlength of text in an element that is displayed

- 1 answer

Ad

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?

Ad

Answer

Ad

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>

Ad
source: stackoverflow.com
Ad