Limit characters displayed in span

Question

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> 

Answer 1

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>