How to have different size text on the same line |
How to have different size text on the same line |
David Webdesign |
Nov 4 2022, 04:45 PM
Post
#1
|
Group: Members Posts: 6 Joined: 20-October 22 Member No.: 28,600 |
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 |
pandy |
Nov 5 2022, 01:00 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
Remove the word-wrap: break-word to start with. Then you could try adding a zero width space between the two words.
CODE <h1>Busted​<span class="h2span">Computer</span></h1> I don't understand some things you are saying. Why do you need to make the H1 display inline "so all the headings can appear on the same line"? There is only one heading and it would appear on one line anyway. And why would a SPAN be needed to butt the words together? If there was a space it must have been because there at one point was space in the markup and the SPAN would do nothing about that. |
David Webdesign |
Nov 5 2022, 01:42 PM
Post
#3
|
Group: Members Posts: 6 Joined: 20-October 22 Member No.: 28,600 |
As an example: how to have the h1 "Busted" and the h2 "Computer" text on the same line and butt up next to each other. The margin and padding are 0px
|
pandy |
Nov 5 2022, 02:19 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
OK. I'll try again.
1. The two words are already butt up if you don't do anything to stop that. They are written together in the markup. Like this: BustedComputer. The browser doesn't know they are two words. It sees a string of letters with no space between them - one word. 2. To make the line break between the words (in the middle of the string as the browser sees it) when the window gets narrow you must do something. Otherwise the line won't break in the middle of a string (when you have done the step 2). I suggested you add a zero width space. 3. You must remove word-wrap: break-word. It's your addition of that that makes the line break letter by letter and you said you do not want that. |
David Webdesign |
Nov 5 2022, 06:47 PM
Post
#5
|
Group: Members Posts: 6 Joined: 20-October 22 Member No.: 28,600 |
Thanks for replying. I modified it quite a bit and removed the span tag.
I may end up adding back the media queries to resize the title text. |
pandy |
Nov 5 2022, 09:55 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
The H1 will still break letter by letter because you use word-wrap: break-word.
|
David Webdesign |
Nov 6 2022, 03:45 AM
Post
#7
|
Group: Members Posts: 6 Joined: 20-October 22 Member No.: 28,600 |
At the link I did explain why.
"I added word-wrap: break-word; to the h1 tag only. The h2 tag word in this case Computer will break to the next line as a whole word. The word Busted would break by individual letter but the width of the screen would be less then any cell phone so not a concern. Without the word-wrap: break-word; the word BustedComputer would run out of the div container." pandy' date='Nov 5 2022, 09:55 PM' post='144381'] The H1 will still break letter by letter because you use word-wrap: break-word. [/quote] |
pandy |
Nov 6 2022, 03:57 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,732 Joined: 9-August 06 Member No.: 6 |
And that would be terrible given such a small screen isn't likely? OK, if that's how you want it.
|
Jason Knight |
Dec 25 2022, 06:22 AM
Post
#9
|
Advanced Member Group: Members Posts: 103 Joined: 25-December 22 Member No.: 28,719 |
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>© 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 |
Lo-Fi Version | Time is now: 26th April 2024 - 07:54 PM |