在单词之间的空白处换行答案

【问题标题】：Break line on white space between words在单词之间的空白处换行
【发布时间】：2015-10-23 10:23:04
【问题描述】：

是否可以在空白处换行并将下一个单词放在新行上？

在以下示例中，结果应类似于第二个标题：

.test{
  text-align:center;
}
h1{  
  display:inline-block;
}
span{
   position:relative;
   top:50px;
   right:45px;
}

<div class="test">
<h1>split this</h1>
<h2>split <span>this</span> </h2>
</div>

是否可以在每个空白处换行？

【问题讨论】：

【解决方案1】：

您可以为word-spacing 属性使用非常高的值。它会在每个空白处换行在单词之间：

.test{
  text-align:center;
}
h1{
  word-spacing:9999px;
}

<div class="test">
<h1>split this</h1>
</div>

【讨论】：

【解决方案2】：

您可以在您的 CSS 中使用 word-wrap 以确保您的文字不会被剪掉，并且如果您的内容区域的大小不适合，则会被强制放在下一行。

如下：

h1 {
   word-wrap: break-word;
}

如果您改为中断单词，无论中断点如何（导致单词从不再适合该区域的点中断），您都可以使用word-break。

h1 {
   word-break: break-all;
}

【讨论】：

word-wrap 已弃用 - stackoverflow.com/a/15137272/104380
@vsync 感谢您的提醒！
不正确...word-wrap 属性本身确实已弃用，不应使用。出于遗留目的，它在内部映射到overflow-wrap。 (docs reference)

【解决方案3】：

.test{
  text-align:center;
  width: min-content;
  white-space: break-space;
  margin-left: auto;
  margin-right: auto;
}

<div class="test">
<h1>split this</h1>
</div>

【讨论】：