There is a non-so-familiar way to apply trimming to text in HTML using simple CSS.
In order to apply a certain width on an element and together ensure that its innerText will be bound to that and will be trimmed accordingly, we can do the following:
<span class="LongTextContainer">Very long text here.. Bla Bla Bla</span>
.LongTextContainer
{
width: 300px;
position: fixed;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
The text-overflow determines that the text will be trimmed while showing ellipsis in the end.
This seems to do the trick quite perfect.
Read additional information in this post.