Forcing a Line Break (Responsive)
What's the best way to force a line break (<br>) but based on screen size?
Using JS, or hidden HTML tags?
17 Replies
?
Hidden html tags is not it. Not sure what element you need to manipulate but flex-wrap or grid/media query?
I'm trying to do it with an H2 tag
The & in the title causes weird spacing issues which is why I'm trying to force a line break only at smaller screen sizes
I’m confused if you want the h2 to wrap onto multiple lines or want to adjust the spacing underneath the h2 … or both .
Text-wrap: balance; and a max-width in a media query comes to mindText-wrap: balance; is cool, never thought to use this before
I just swapped around the heading text and it looks better. Client wanted specific wording which looked extremely weird once wrapped (was three lines, first two lines had weird line spacing because of certain letters)
Thank you for your input though, greatly appreciatedstrictly speaking, without thinking about what you're trying to achieve, sounds like you need the
<wbr> taghard to tell without more info (or example)
other option (maybe) would be
the
<wbr> would be a better option, sometimesInteresting, thank you for this example
From an SEO standpoint, are there any negatives with nesting tags within Headings?
no
a
<span> has no semantic meaning at all
it's just text, basicallyOkay. I thought of nesting to fix but the quickest solution was to change the wording
Basically, a custom font I used had weird top line spacing on certain characters
yeah, change the font
and when adding line height, all other characters looked great besides two which were overlapping. Any more spacing and it would look odd, thats why I was trying to force a line break at certain screen sizing
well, which font is it?
I changed it. It was a custom font I found on DaFont
didn't have many variations for weights either
you did well in changing
that sounds like a broken font