Line break in span

Question

.heading {
  font-weight: bold;
  vertical-align: top;
  height: auto;
  font-stretch: extra-expanded !important;
  overflow: hidden;
  
  display: inline-block !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  white-space: normal;

}
.heading span {
  font-size: 1.1rem !important;
  word-break: break-all !important;

  display: inline-block !important;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  word-wrap: break-word !important;
  /* margin: 0; */
  display: block !important;
  white-space: normal;
  /* line-height: 57px; */
}

              <span class="heading"><span class="appear">WORD1WORD1 WORD2WORD2</span></span>
              <span class="heading"><span class="appear">WORD1WORD1   WORD2WORD2</span></span> 
              <span class="heading"><span class="appear">WORD1WORD1 WORD2WORD2</span></span>
              

My span words are getting displayed as a group and don't insert line break after a word if required. Since I am animating these words together, I need to keep them in a single span element. I have tried the tricks of word-wrap but they don't seem to work.

Answer 1

You can add white-space: pre-line; to the .appear class so the words are broken when line breaks are added.

.heading {
  font-weight: bold;
  vertical-align: top;
  height: auto;
  font-stretch: extra-expanded !important;
  overflow: hidden;
  
  display: inline-block !important;
  word-wrap: break-word !important;
  word-break: break-all !important;
  white-space: normal;

}
.appear {
  white-space: pre-line;
}
.heading span {
  font-size: 1.1rem !important;
  word-break: break-all !important;

  display: inline-block !important;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  word-wrap: break-word !important;
  /* margin: 0; */
  display: block !important;
  /* white-space: normal; */ remove white-space here
  /* line-height: 57px; */
}

<span class="heading"><span class="appear">WORD1WORD1 WORD2WORD2</span></span>
<span class="heading"><span class="appear">WORD1WORD1   
WORD2WORD2
</span></span> 
<span class="heading"><span class="appear">WORD1WORD1 WORD2WORD2</span></span>