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

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.

Question:

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.

If you place your curser between the carets of h1 and h2 >< and space them one time > < the words will break without using word-wrap: break-word but I notice there is a small gap between Busted and Computer where as I want them to butt right up to each other.

I am not sure if this is the correct way but it works.....

See code below or right click on the page and view source then copy to an editor like Notepad or HTMLPad 2022 to make changes then save and open in the web browser to see the results.

    
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.

Use this in the css style section:

h1 {
    display: inline;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 375%;
    color: #ff7f50;
    margin: 0px;
    padding: 0px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
    word-wrap: break-word;
}

h2 {
    display: inline;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 230%;
    color: #3b6ea5;
    margin: 0px;
    padding: 0px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
}

Then use this in the html section:

    <div class="title">
    <h1>Busted</h1><h2>Computer</h2>
    </div>