What is the best way to wrap text intentionality
This might seem like a dumb question but I always feel like I'm doing this wrong.
If I have a h1 for example and I want to wrap it over 2 lines for design purposes is the best way to use a br tag or max-width?
I feel like both of those solutions aren't great so if there's a better way to do this please let me know 🙂
35 Replies
what's the text?
You want me to post a screenshot?
demo is best but would help
I will use <br> for things like that but #depends
no, just the text and how you intend to split it
and if the "split" text will have a different style or not
from the design file
yeah, i would throw a <br> in there
or, better yet: a <wbr>
unless the "split" is a must
Yeah also because at mobile devices that text stays the same in terms of how many words are on each line, Although lets say it was different at smaller screen sizes what would you do?
clamp probably
Just make the h1 smoler xD
unless you want to have it be one word per line
hmm ok thx
I use clamp normally but sometimes I can't get the right amount of words on each line and it can be annoying lol
Like it should still wrap fine
but if you want to keep the design the same for mobile being two words per break then ya either clamp or just change the fontsize in a media query
in the worst case scenario, use an svg
noooooo
not for a h1 xD
you can
well #depends
it's valid
and the text is supposed to be readable
it is but you would need to still use aria yes?
very likely
<text> does not read out faik
don't know if browsers are too happy about it
Its SEO friendly but not a11y which erks me
??
People do that?
but since it is a design element and not a title, maybe .......
op said h1
for design elements yes because SVG scales really well
sometimes, because you can't (yet) make a text take the entire width of the element without adding weird space between the letters
yeah but not for a h1 lol unless?
if you justify the text, it will look l i k e t h i s
and that's unreadable
yea I typically wouldn't for that design its just font so
you can, but it's the bottom of the barrel of the options
when you're trully extremely desperate for any solution
for this, not a good idea
thx for the help 🫡
you're welcome
I should probably ask this too. When it comes to wrapping body text and getting the right amount of words on each line what's the best strategy there? Because normally I'd just use a max-width but idk?
honestly, i wouldn't do anything
you just let it wrap natually?
maybe check text-wrap-style, to change how the wrapping behaves
but otherwise, yes
depending on the design