"Dynamic" line breaks in very long text

Aperta
  • Qualcosa non va?
#1,480 1 commento 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
42/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, tailwindcss, typescript
Ambito
frontend

Direzione di ricerca

Parti dal rendering dell'etichetta Sidebar.Collapse mostrato nell'issue e verifica come le relative classi Tailwind CSS gestiscono il testo lungo. Il lavoro è completato quando le etichette lunghe vanno a capo in corrispondenza degli spazi senza fuoriuscire né compromettere il layout della barra laterale; verifica il comportamento nella UI della barra laterale interessata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

  • I have searched the Issues to see if this bug has already been reported
  • 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:

image

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!

Lingua principale
TypeScript
Stelle
2.1k
Fork
502
Merge medio
19h 16m
PR unite (30g)
2

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di themesberg/flowbite-react

Tutte le issue di themesberg/flowbite-react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.