html - 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>

question from:https://stackoverflow.com/questions/33718245/limit-characters-displayed-in-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>