Truncate Long TabStrip Tab Titles.

Environment

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:

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