New to Kendo UI for Angular? Start a free 30-day trial

Truncate Long TabStrip Tab Titles.


ProductProgress® Kendo UI for Angular TabStrip


How can I truncate long TabStrip tab titles and render ellipsis?


By default, the TabStrip component does not truncate long tab titles as they don't have fixed width. You can truncate them and show ellipsis by using some custom CSS styling:

.k-tabstrip .k-tabstrip-items .k-item .k-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 75px;
    display: inline-block;

You can further control the width of the tabs by adjusting the width CSS property value.

The following example shows the full implementation of the demonstrated approach.

View Source
Change Theme:

In this article

Not finding the help you need?