The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to have different size text on the same line
David Webdesign
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2022, 01:00 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,265
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&#x200B;<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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
David Webdesign
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2022, 02:19 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,265
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
David Webdesign
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2022, 09:55 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,265
Joined: 9-August 06
Member No.: 6



The H1 will still break letter by letter because you use word-wrap: break-word.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
David Webdesign
post 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]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 6 2022, 03:57 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,265
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 27th November 2022 - 10:07 AM