在单词之间用白色 space 换行

Question

是否可以在白色上换行 space 并将下一个单词换行？

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

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

是否可以在每个白色上打断线space？

Answer 1

您可以为 word-spacing 属性使用非常高的值。它将 在单词之间的每个白色 space 上换行 :

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

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

Answer 2

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

喜欢以下内容：

h1 {
   word-wrap: break-word;
}

如果您改为打断单词，无论打断点是什么（导致单词从不再适合该区域的点处打断），您都可以使用 word-break.

h1 {
   word-break: break-all;
}

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

Break line on white space between words