如何在字母和标点符号之间进行换行以避免在行尾添加额外的空格？

Question

第一个框的第一行末尾有一个恼人的空白。第二个盒子工作正常。

我认为CSS试图避免标点符号出现在一行的开头。但它会导致难看的地形。

我该怎么强迫它换行？

.box {
  margin: 2em;
  padding: 0.5em;
  width: 8em;
  height: 8em;
  border: 1px solid;
}
.text {
  font-size: 1em;
}

<div class="box">
  <p class="text">你好，我来自中国！！！你好，我来自中国！</p>
</div>
<div class="box">
  <p class="text">你好，我来自中国你好，我来自中国</p>
</div>

Answer 1

既然你正在写中文，我猜word-wrap: break-word; word-break: break-all;就是为了这个目的：

＆＃13;

＆＃13;

.box {
  margin: 2em;
  padding: 0.5em;
  width: 8em;
  height: 8em;
  border: 1px solid;
}
.text {
  font-size: 1em;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre;
}

＆＃13;

<div class="box">
  <p class="text">你好，我来自中国！！！你好，我来自中国！</p>
</div>
<div class="box">
  <p class="text">你好，我来自中国你好，我来自中国</p>
</div>

＆＃13;

＆＃13;

＆＃13;