Make each word in a heading have it's own line?

HTML & CSS
1

Hi,

I have a h1 tag and would like each work to break onto a new line. Apart from wrapping each word in a span and giving it a display: block;, is there another way to do this?

Thanks!

2

Hi there toolman,

this should get the job done…

 <h1>
  Make<br>
  each<br>
  word<br>
  in<br> 
  a<br>
  heading<br>
  display<br>
  as<br>
  a<br>
  block
 </h1>

coothead

2 Likes
3

Many thanks, I will use that :slight_smile:

I wondered if there was a way with CSS?

4

You could try word-spacing:

h1 {
  width: 5em;
  text-align: center; /* if you like */
  word-spacing: 5em;
}
3 Likes
5

Hi there toolman,

if you prefer to use @Erik_J’s CSS method,
it might be prudent to add…

    word-break: break-all;

…to the code, for words that may overflow the
confines of a fixed width. :winky:

coothead

3 Likes
6

Good point, but not necessary if the goal is to break each word to a new line. As you mention, the text would overflow the fixed width.

Though the center align would need a sufficient width to truly center.

7

Why not just this:

h1{display:table;width:1%}

Or did I miss something?

edit: Yes I did lol. If the word is long then two words will fill the space.

Please Ignore this post :slight_smile:

Edit Edit: Added word spacing:100vw and now it seems to work :wink:

4 Likes
8

I am obviously biased here, but I see
the solution to this problem as…

HTML: 1 , CSS: 0

[edit]

@PaulOB’s Edit Edit does of course mean
that I will have to change the result to…

HTML: 1 , CSS: 1        :rofl:

[/edit]

coothead

5 Likes
9

You forgot to count my version!

HTML: 1, CSS:2

FTFY :stuck_out_tongue:

4 Likes
10

Sorry about that Eric. :unhappy:

Unfortunately, due to a reduction in my neural
pathways, I often forget all sorts of stuff. :shifty:

Oh my gosh, where am I? :wonky:

cohoteda

5 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.