Kevin Powell - Community•12mo ago

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

MarkBoots•12mo ago

https://discord.com/channels/436251713830125568/1179995427030978661

MattOP•12mo ago

clevermissfox•12mo ago

Hidden html tags is not it. Not sure what element you need to manipulate but flex-wrap or grid/media query?

MattOP•12mo ago

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

clevermissfox•12mo ago

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 mind

MattOP•12mo ago

Text-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 appreciated

ἔρως•12mo ago

strictly speaking, without thinking about what you're trying to achieve, sounds like you need the <wbr> tag

MarkBoots•12mo ago

hard to tell without more info (or example) other option (maybe) would be

<h2>
  <span>Hello</span>
  <span>&</span>
  <span>World</span>
</h2>

<h2>
  <span>Hello</span>
  <span>&</span>
  <span>World</span>
</h2>

h2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25ch;
  
  @media(width < 600px){
    > span:first-of-type{ width: 100% }
  }
}

h2 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25ch;
  
  @media(width < 600px){
    > span:first-of-type{ width: 100% }
  }
}

ἔρως•12mo ago

the <wbr> would be a better option, sometimes

MattOP•12mo ago

Interesting, thank you for this example From an SEO standpoint, are there any negatives with nesting tags within Headings?

ἔρως•12mo ago

no a <span> has no semantic meaning at all it's just text, basically

MattOP•12mo ago

Okay. 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

ἔρως•12mo ago

yeah, change the font

MattOP•12mo ago

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

ἔρως•12mo ago

well, which font is it?

MattOP•12mo ago

I changed it. It was a custom font I found on DaFont didn't have many variations for weights either

ἔρως•12mo ago

you did well in changing that sounds like a broken font

Gaming

Programming

Forcing a Line Break (Responsive)