texts
Middle truncated paths
Nothing is measured. Split the string in two, put both halves in a flex row: the head is the only flexible item and carries the text-overflow, and the tail refuses to shrink. When the row runs out of room the head gives way and the cut lands in the middle on its own. The line everyone forgets is min-width: 0.
See it live and copy its promptWhat you can adjust
- Background
- Card color
- Head color
- Secondary color
- Tail characters
- Card width
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
