使用跨度使用css创建换行符

Question

我有一个h1标记，每个字都包含在一个带有word1 word2等类的范围内。

我需要按照特定的顺序包装这些单词。

句子是"software designed to make life easier."

我需要将其分解，因此格式如下：

software
designed
to make
life easier.

我无法更改h1以包含换行符，所以我不得不使用jQuery用span包装每个单词。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用:after或::after伪元素创建效果。它不是一个干净的解决方案，但我不能想到一个更清洁的解决方案。

＆＃13;

＆＃13;

.word1:after,
.word2:after,
.word4:after,
.word6:after {
content: "";
display: block;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;