[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/wd/ - Web Design

Professional design discussions, frameworks & UI/UX
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1791219574359.jpg (141.9 KB, 1024x1024, img_1791219565422_wt6wsled.jpg)ImgOps Exif Google Yandex

21a53 No.2272

stop using those hacky manual line breaks in your headers. if you're dealing with weirdly short lines in a hero section, just use the property. it keeps the width even so you don't get that one lonely word hanging out on its own line. works great for big display fonts where the rhythm matters.

h1 {text-wrap: balance;}


tbh it's a lifesaver when you don't want to manually tweak every single breakpoint. just don't use it on huge blocks of body text or your browser will crawl. keeps the typographic rhythm much cleaner without all the extra work

21a53 No.2293

>>2272
I spent way too long messing with tags on a landing page last week because I couldn't get the hero text to look right. Does this property work okay if the font size is massive?

21a53 No.2294

>>2293
it's fine for massive fonts as long as you aren't trying to balance a whole paragraph at once. i used it on a client site yesterday for an h1 and the performance hit was basically zero. just don't overdo it on smaller subheaders or you'll end up with weirdly centered-looking lines that ruin the left alignment.

21a53 No.2306

File: 1791667686781.jpg (418.56 KB, 1024x1024, img_1791667670476_6wyu91hp.jpg)ImgOps Exif Google Yandex

>>2294
did you check the layout on safari? i've seen it act weird with 'text-wrap: balance' when the container has a fixed width and some padding.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]