Text truncate on Sidebar items not working

[njannink]

Im migrating from the hand written Bootstrap and the Blazor template code to use Blazorise and I run into an issue with the Sidebar component.

Im using the manual Sidebar but a sub menu is being generated based on something that is loaded from the server. Submenu items are being generated, but sometimes the text on this menu-item is too long. With the old nav-menu I was using text-truncate on the text part of the menu item to truncate the text and show a ... Unfortunately this doesn't work with the sidebar. Any ideas?

The code below comes closest, because the menu items are no longer overflowing to the next line, but it would be nice if the text would show an ellipse (...) for the truncated text

<SidebarItem>
    <SidebarLink Toggled="(isOpen)=> projectItems.Toggle(isOpen)" IsShow="true">
        <img src="img/Projects.png" width="24" height="24" alt="Projects"/> Projects   
    </SidebarLink>
    <SidebarSubItem @ref="projectItems" IsShow="true">
        @foreach (var project in Projects)
        {
            <SidebarItem Class="text-truncate">
                <SidebarLink To="@GetProjectUrl(project)">
                    <img class="img-fluid" src="img/project.png" width="24" height="24" alt="@project.Name" />
                    <span data-toggle="tooltip" title="@project.Name">@project.Name</span>
                </SidebarLink>
            </SidebarItem>
        }
    </SidebarSubItem>
</SidebarItem>

[stsrki]

I think your best option is to add this styles to your site.css.

.sidebar-subitem .sidebar-link {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

[stsrki]

The sidebar is obsolete and is replaced with the Bar component. Closing now.