单词

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

是否可以打破每个空白区域的线？

Answer 1

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

.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

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