跨度换行

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>

我的跨度词作为一个组显示，如果需要，不要在单词后插入换行符。由于我将这些单词放在一起制作动画，因此我需要将它们保存在单个 span 元素中。我尝试了自动换行的技巧，但它们似乎不起作用。

Answer 1

只需在需要换行的地方添加<br>即可。示例：

<span>Word1 <br> Word2</span>

您可以添加 white-space: break-space; ：必要时它会在白色 space 处断词。
使用width: min-content; : 宽度尽可能设置为最小内容。

Answer 2

您可以将 white-space: pre-line; 添加到 .appear class，这样在添加换行符时单词会被打断。

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

跨度换行

Line break in span

javascript

html

css

word-wrap

line-breaks