Separating each word of a title onto its own line using HTML and CSS

Question

Separating each word of a title onto its own line using HTML and CSS

Looking for a solution to style dynamic titles with each word on its own line? Check out the desired look here. (Note the black backgrounds for each word)

The challenge is keeping the same style while having the whole title inside one tag without dynamically inserting H1's before and after each word.

Want to change the HTML markup from:

<div class="tagline">
<h1>
    Oh
</h1>
<h1>
    Look
</h1>
<h1>
    A
</h1>
<h1>
    Headline
</h1>
<h1>
    Thanks
</h1>
</div>

to something like this:

<div class="tagline">
    <h1>
        Oh Look A Headline Thanks
    </h1>
</div>

Don't forget to maintain the same style as in the link above. Thanks in advance!

html css

Answer 1

Answer №1

Check it out: http://jsfiddle.net/thirtydot/HksP2/

The design appears flawless in IE9, IE8, recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It gracefully degrades in IE7. In Mac's Safari, it's almost impeccable.

This concept originates from a prior response. Quoting my own words from that context:

Remember that adjusting the line-height and padding can be quite challenging to get just right.

line-height: 1.83; seems promising, discovered by selecting something similar to your desire, then experimenting until finding a solution that works well on both Chrome and Firefox (as they render text differently).

HTML:

<div class="tagline">
    <h1><span>
        Oh Look A Headline Thanks
    </span></h1>
</div>

CSS:

.tagline {
    display: inline-block;
    width: 0;
    line-height: 1.83; 
    padding: 1px 0; 
    border-left: 20px solid #000;
}
.tagline h1 {
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background: #000;
    display: inline;
    padding: 8px 0;
    text-transform: uppercase;
}
.tagline span { 
    position: relative;
    left: -10px;
}

Answer 2

Check it out: http://jsfiddle.net/thirtydot/HksP2/

The design appears flawless in IE9, IE8, recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It gracefully degrades in IE7. In Mac's Safari, it's almost impeccable.

This concept originates from a prior response. Quoting my own words from that context:

Remember that adjusting the line-height and padding can be quite challenging to get just right.

line-height: 1.83; seems promising, discovered by selecting something similar to your desire, then experimenting until finding a solution that works well on both Chrome and Firefox (as they render text differently).

HTML:

<div class="tagline">
    <h1><span>
        Oh Look A Headline Thanks
    </span></h1>
</div>

CSS:

.tagline {
    display: inline-block;
    width: 0;
    line-height: 1.83; 
    padding: 1px 0; 
    border-left: 20px solid #000;
}
.tagline h1 {
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    background: #000;
    display: inline;
    padding: 8px 0;
    text-transform: uppercase;
}
.tagline span { 
    position: relative;
    left: -10px;
}

Answer 3

Answer №2

Your best bet to achieve this is by creating a custom JavaScript function that can parse your <h1>oh look ..</h1> content and convert it into multiple separate h1 tags.

update:

A new idea just came to mind: http://jsfiddle.net/2LEmF/10/

In essence, you should move the background color styling to the main div element. Then, set a specific width for your h1 tag that will cause the text to break according to regular text formatting rules, like 10px.

It's uncertain how various browsers will interpret this approach since you are specifying an unusually small size for the H1 element... but it could potentially fulfill your requirements.

Answer 4

Your best bet to achieve this is by creating a custom JavaScript function that can parse your <h1>oh look ..</h1> content and convert it into multiple separate h1 tags.

update:

A new idea just came to mind: http://jsfiddle.net/2LEmF/10/

In essence, you should move the background color styling to the main div element. Then, set a specific width for your h1 tag that will cause the text to break according to regular text formatting rules, like 10px.

It's uncertain how various browsers will interpret this approach since you are specifying an unusually small size for the H1 element... but it could potentially fulfill your requirements.

Answer 5

Answer №3

Check out this easy way to display each word on a separate line:

https://example.com/unique-link

HTML Code:

<div class="phrase">
    <p>
        Here is a sentence displayed word by word
    </p>
</div>

CSS Styling:

.phrase p {
  display: inline-block;
  word-spacing: 50vw;
}

Answer 6

Check out this easy way to display each word on a separate line:

https://example.com/unique-link

HTML Code:

<div class="phrase">
    <p>
        Here is a sentence displayed word by word
    </p>
</div>

CSS Styling:

.phrase p {
  display: inline-block;
  word-spacing: 50vw;
}

Answer 7

Answer №4

To achieve a unique design, try setting the width of the h1 element to a value smaller than the length of the shortest word like 10px.

This method yields identical results as shown in your sample (particularly when viewed on Chrome and Firefox).

For a live example, check out this Jsfiddle link.

Answer 8

To achieve a unique design, try setting the width of the h1 element to a value smaller than the length of the shortest word like 10px.

This method yields identical results as shown in your sample (particularly when viewed on Chrome and Firefox).

For a live example, check out this Jsfiddle link.

Answer 9

Answer №5

To achieve a similar appearance, consider replacing spaces with the <br /> element:

http://codepen.io/XYZ123/

Answer 10

To achieve a similar appearance, consider replacing spaces with the <br /> element:

http://codepen.io/XYZ123/

Answer 11

Answer №6

I'm a little confused about the issue at hand. It appears that you're facing a challenge with the HTML provided in your question and you would like it to be displayed inline?

Have you considered simply adding display:inline; to .tagline ?

http://jsfiddle.net/XmCLd/

Alternatively, is it the reverse situation? Do you have HTML that looks normal but requires line breaks at spaces?

http://jsfiddle.net/GQ44u/

Answer 12

I'm a little confused about the issue at hand. It appears that you're facing a challenge with the HTML provided in your question and you would like it to be displayed inline?

Have you considered simply adding display:inline; to .tagline ?

http://jsfiddle.net/XmCLd/

Alternatively, is it the reverse situation? Do you have HTML that looks normal but requires line breaks at spaces?

http://jsfiddle.net/GQ44u/

Answer 13

Answer №7

Modify the tagline section to be very slim and change it from inline to block. Then set the h1 to be inline.

.tagline
{
    width: 1px;
    margin:5px;
    display: block;
}
.tagline h1
{
    color:#fff;
    background: #000;
    padding: 4px 10px;
    font-size: 20px;
    line-height: 30px;
    text-transform:uppercase;
    display: inline;
}

Click here for JSFiddle link.

Answer 14

Modify the tagline section to be very slim and change it from inline to block. Then set the h1 to be inline.

.tagline
{
    width: 1px;
    margin:5px;
    display: block;
}
.tagline h1
{
    color:#fff;
    background: #000;
    padding: 4px 10px;
    font-size: 20px;
    line-height: 30px;
    text-transform:uppercase;
    display: inline;
}

Click here for JSFiddle link.

Separating each word of a title onto its own line using HTML and CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Modify the style of a webpage through JavaScript

After incorporating some movement effects into my menu, suddenly none of the buttons were responding

Add a layer on top of the background in order to cover the entire screen

The functionality of the onclick and onserverclick attributes seem to be malfunctioning when

Adjusting specific sections of a container in real-time

Need to tick only specific items from the list in Django checkbox?

What is the best way to determine if a character is valid for use in HTML rendering?

Can dynamically loaded scripts from the <head> section slow down the loading of a webpage?

Displaying content conditionally - reveal a div based on user selection

Submitting a form in a Chrome packaged app

<!--[if IE]> does not function properly on any web browser

Load Form with Json Data from LocalStorage Key-ID to Auto-Populate Fields

How can you identify dynamically created elements within an AngularJS directive?

Attempting to dynamically populate a dropdown menu in HTML using the ng-repeat directive from AngularJS

Toggle the navigation bar

Bizarrely rapid transitions from standard to hovering appearance in CSS

Adjust the CSS of a dynamically generated jQuery checkbox button in real-time

Email Template not rendering properly across various platforms

Steady Navigation Bar in Javascript without Bouncing

Tutorial on wrapping HTML content in a CDATA tag using jQuery