Truncate Long TabStrip Tab Titles.

Environment

Product

Progress® Kendo UI for Angular TabStrip

Description

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

Solution

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:

css

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

Change Theme

Theme

Loading ...