跨度换行答案

【问题标题】：Line break in span跨度换行
【发布时间】：2021-09-05 15:41:26
【问题描述】：

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

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

【问题讨论】：

如果我理解正确，意味着你需要插入换行符，那么你可以使用html <br>标签
这些 span 元素是段落的一部分，所以我想在需要的地方插入换行符，例如。如果其中一个单词可以在一行显示，另一个单词在下一行显示，则插入换行符，而不是在新行中显示整个 span 块。
您想要达到的结果是什么？你要每行一个字吗？或者你想让单词分开，让单词的一部分在一行，其余的在下一行？您所描述的单词如果不适合换行则换行的是默认功能，该功能已经在您的示例中出现。

标签： javascript html css word-wrap line-breaks

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：