在词之间的白色空间的断裂线

Question

是否有可能在空白处打破线并将下一个单词放在新线上？

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

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

是否有可能在每个空白处打破线条？

Answer 1

您可以为字间距属性使用非常高的值.它将在单词之间的每个空格上打破线条:

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

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

Answer 2

• white-space: break-space;：必要时在空白处断词。
• width: min-content;：宽度尽可能最小内容。
• margin-left: auto;和margin-right: auto;：（可选）对齐到中心。

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