Question

How to Limit the characters in CSS ?

Answer 1

Is there some sort of way within HTML or CSS to limit the characters displayed with a span? I use a repeater that displays these info boxes and I want to limit the characters to the first 20 characters and if the input has more, then just concatenate? The box is like image shown:



My code for this is:

<span class="claimedRight" maxlength="20">{{ item.provider }}</span>
share improve this question
asked
Nov 15 '15 at 9:37

Mark
649●1●9●31
2
maxlength is an input element attribute. You can set a width for the item and use text-overflow: ellipsis in CSS. Limiting characters is not possible with CSS since it cannot work with text nodes. – Manoj Kumar Nov 15 '15 at 9:40
add a comment
5 Answers
order by
up vote
47
down vote
accepted
Here's an example of using text-overflow:

.text {
display: block;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<span class="text">Hello world this is a long sentence</span>
share improve this answer
answered
Nov 15 '15 at 9:45

Samuel Cook
12.9k●4●33●48
1
Would add that when using this technique it's a good idea to set your width to em units so that the amount of text that fits in your containers scales with the font size. – TylerFowler Jan 1 at 21:48
add a comment
up vote
2
down vote
You can use css ellipsis; but you have to give fixed width and overflow:hidden: to that element.

<span style="display:block;text-overflow: ellipsis;width: 200px;overflow: hidden; white-space: nowrap;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</span>