How to have different size text on the same line Options

[David Webdesign]

How to have different size text on the same line and have the 2 words butt up next to each other with different colors as this example: BustedComputer

Question:
How can this be done with out using a span tag as when you shrink the width of the browser window or view on a cell phone the title BustComputer will break but at one letter at a time to the next line if not for the media query shrinking the text. I think it would be better to have a larger text with the whole word Computer going to the next line if the width was not wide enough on the cell phone to accommodate both words on the same line.
You can remove the media query to see the effect as you shrink the width of the browser or view on a cell phone.

See the link below for what I have done. I think there has to be a better way!

How to have different size text on the same line

This post has been edited by David Webdesign: Nov 4 2022, 04:52 PM

[Jason Knight]

What would make the first word the (singular) headING (singular) on your page that everything on the page -- and possibly the entire site / collection of pages -- is a subsection? What makes the second word the start of the primary content subsection of the page? (aka the first content bearing tag inside your MAIN tag?)

That's the same "broken semantics" as what HTML 5 initially tried to do with HGROUP, something that proved the WhatWG wasn't qualified to make 4 Strict's successor.

You do know these tags have semantic meanings and that if you choose them for presentational reasons you're doing it all wrong, right?

I would go with the span inside the H1 if this is indeed your structural H1 candidate, but since you would/should only ever have one H1 I wouldn't be slopping a "class for nothing" on it.

<h1>Busted<span>Computer</span></h1>

If you leave the H1 alone and set the span to inline-block, the span acts as a soft keep-together.

CODE

h1 span {
  display:inline-block;
}

Is literally all you needed.

Here's a pen:
https://codepen.io/jason-knight/pen/rNrOmKx

Side note, don't worry. A LOT of even seasoned developers don't know that trick. I use it in footers all the time so that sections like:

CODE

<footer>
  <span>&copy; CutCodeDown</span>
  <span>Jason M. Knight</span>
  <span>Paladin Systems North</span>
</footer>

Can appear together on one line when the screen is wide enough, but each subsection "keeps together" when it's narrow enough for the text to wrap all thanks to just setting display:inline-block;

This post has been edited by Jason Knight: Dec 25 2022, 06:25 AM