0

I have an h1 tag with each word wrapped in a span with a class such as word1 word2 etc.

I need to wrap these words in a specific order.

The sentence is "software designed to make life easier."

I need this to be broken up so it is formatted as such:

software
designed
to make
life easier.

I do not have the ability to change the h1 to include line breaks so I am having to wrap each word with a span using jQuery.

<h1 class="et_pb_module_header">
  <span class="word1">software</span> <span class="word2" style="">designed</span> <span class="word3">to</span> <span class="word4" style="">make</span> <span class="word5" style="">life</span> <span class="word6">easier.</span>
</h1>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
Ben H
  • 502
  • 1
  • 7
  • 24
  • 5
    Possible duplicate of [How to give line-break from css, without using
    ?](https://stackoverflow.com/questions/2703601/how-to-give-line-break-from-css-without-using-br)     – Carsten Løvbo Andersen Dec 13 '17 at 11:31
  • 3
    `display: block` ...? – Rory McCrossan Dec 13 '17 at 11:31
  • 1
    spans are inline elements and don't naturally break the line. So you'd have to set them to be block-level (as Rory suggested and is given as the solution in the duplicate posted by Carsten), or use `
    ` instead of `` . If you don't understand about inline vs block-level, and which elements default to which display type then please research the "display" CSS property.     – ADyson Dec 13 '17 at 11:34

1 Answers1

3

You could create the effect with the :after or ::after pseudo element. It's not a clean solution, but I can't think of a cleaner one.

.word1:after,
.word2:after,
.word4:after,
.word6:after {
content: "";
display: block;
}
<h1 class="et_pb_module_header">
  <span class="word1">software</span> <span class="word2" style="">designed</span> <span class="word3">to</span> <span class="word4" style="">make</span> <span class="word5" style="">life</span> <span class="word6">easier.</span>
</h1>
  • `display:block` is cleaner – Pedram Dec 13 '17 at 11:41
  • It would be if each span was being added on a separate line. The last two lines include 2 spans per line and the `content` is required for the pseudo elements. –  Dec 13 '17 at 11:43
  • But i think need to break all `spans` like this `h1.et_pb_module_header span { display: block; }` – Pedram Dec 13 '17 at 11:47
  • 2
    Display:block would work and is used on other parts of the site but I am not breaking after every word so it isn't suitable in this case. The pseudo method should work better as I am not breaking every span – Ben H Dec 13 '17 at 11:48