Limit Line Text For Free

If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.

The CSS property you use for text truncation is text-overflow . To enable text truncation, you need to set the text-overflow property to "ellipsis" and the white-space property to nowrap to prevent the text from wrapping to the next line.

We use <input> tag to get user input in HTML. To give a limit (or range) to the input field, we use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To set the maximum character limit in input field, we use <input> maxlength attribute.

Here, the area of the DIV element is shown by the red border, and we can clearly see that the text is going beyond it. We can solve this problem by using the CSS overflow property. overflow: hidden; hidden - The overflow is clipped, and the rest of the content will be invisible.

Users can follow the syntax below to set the text limit to N lines using CSS. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; In the above syntax, we set the overflow hidden, 'text-overflow: elipsis' to truncate the text.

You can use the line-clamp CSS property to limit the length of a text to N lines with CSS. The line-clamp property limits the contents of a block to the specified number of lines.

The formula is: max-height = line-height * number of lines . If the line-height property of the text is 1.7em , then to limit the text to 2 lines, you would multiply 1.7em * 2 = 3.4em . Where 3.4em is the value of the max-height property. Similarly, to limit the text to 3 lines, you would multiply 1.7em * 3 = 5.1em .

CSS: Limit Text Length Methods max-width ? Sets the maximum width of an element. overflow ? Sets the desired behavior when content does not fit. text-overflow ? Sets how hidden overflow content is signaled. white-space ? Sets how white space inside an element is handled.