Menu
I have a paragraph of text:
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> How can I make sure that no more than 30 characters are shown on one line with CSS?
351
While you can't use CSS alone to do this, you can limit the amount of characters show using CSS as Darren has suggested. You need to set your text container to white-space: no-wrap, text-overflow: ellipsis, and overflow:hidden. Then simply set the size for your container.
There are a few ways to do it with pure CSS. Let's learn how to achieve that. The easiest way to limit text to n lines is to use line-clamp . N can be any positive number, but it will be two or three lines most of the time.
To add a multi-line text input, use the HTML <textarea> tag. You can set the size of a text area using the cols and rows attributes. To limit the number of characters entered in a textarea, use the maxlength attribute. The value if the attribute is in number.
You could do this:
(Note! This is CSS3 and the browser support = good!! )
p { text-overflow: ellipsis; /* will make [...] at the end */ width: 370px; /* change to your preferences */ white-space: nowrap; /* paragraph to one line */ overflow:hidden; /* older browsers */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
