Text Property Lab
text-overflow · word-wrap · word-break · writing-mode
one
Ellipsis Magic
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; hover to reveal full text
Supercalifragilisticexpialidocious this ridiculously long single line gets clipped with an ellipsis when it overflows.
two
Break Long Words
word-wrap: break-word; breaks only at word boundaries
Pneumonoultramicroscopicsilicovolcanoconiosis is the longest word in English word-wrap breaks it gracefully at the container edge without breaking readability.
three
Aggressive Break
word-break: break-all; breaks at any character
https://super-long-url-with-no-hyphens-or-slashes-that-just-keeps-going-and-going-and-going.com/this-is-why-we-need-word-break
four
Vertical Flow
writing-mode: vertical-rl; top to bottom right to left
vertical flow
five
Horizontal Flow
writing-mode: horizontal-tb; standard left to right
horizontal flow
six
Sideways
writing-mode: sideways-rl; characters rotated 90 degrees
sideways
bonus
Ellipsis plus Word Wrap Combo
text-overflow: ellipsis; + word-wrap: break-word; hover to reveal full text
ThisIsAReallyLongStringWithNoSpacesThatWouldNormallyOverflowButNowItGetsAnEllipsisWhenItExceedsTheContainerWidthAndWordWrapProvidesFallback
real world
Long API URL
word-break: break-all; perfect for endpoints and tokens
https://api.example.com/v2/users/987654321/orders/2024/12/31/receipts/very-long-transaction-id-abc123def456ghi789jkl012mno345pqr678stu901vwx234yz