"Dynamic" line breaks in very long text

[senpro-ingwersenk]

• [X] I have searched the Issues to see if this bug has already been reported
• [X] I have tested the latest version

Summary

I am working on a project with Preact and shadcn-ui (TailwindCSS) but needed a sidebar navigation and thus came to this project here. I noticed, that very long texts do not get linebreaks. Here is an example:

The piece you see here is actually this:

          <Sidebar.Collapse label="Technischorganisatorische Maßnahmen">
            <Link to="#">Audits</Link>
            <Link to="#">DSFA / Datenschutzfolgeabschätzung</Link>
            <Link to="#">Audits</Link>
          </Sidebar.Collapse>

Hence, I would like to request a feature whereby long labels like this would get a linebreak separated by their whitespace.

Context

This is just a very simple CRUD application; a few tables and whatnot. But, my supervisor isn't exactly savy and I am the only one in this whole company with a proper development background. Due to my visual impairment however, I am much more of a TUI dude than GUI ;) Doing my best with what I have. I am sure this could be solved with some CSS, but I couldn't figure it out unfortunately...

Thank you and kind regards!

[kenshanta]

@senpro-ingwersenk CSS has two properties that handle this specific behavior:

• word-break
• overflow-wrap (previously word-wrap)

Have you tried adding the CSS property overflow-wrap: break-word to the Sidebar component? It should solve your issue.

But I'm not sure if this break-all behavior is intentional from the flowbite-react team.; @rluders might be able to confirm

LMK if this was helpful