在正确的位置包装文字

Question

我想将文本包装在div容器中，但我不希望在某些“随机”字符处切掉单词。

我尝试过使用style="word-wrap: normal"，但这仅在IE中有效，而在Firefox中则无效。使用style="white-space: some option"时，单词会在不需要的地方被切掉。例如，单词“ reason”在行的结尾处显示为“ reas”，而在下一行的开始处显示为“ on”。不能使用选项“ nowrap”，因为文本超出了div容器的边缘。

<div style="text-align: justify;">I agree, fully and voluntarily, to participate in this research study. With this, I retain the right to withdraw my consent, without having to give a reason for doing so.</div>

如果空格不足以容纳div容器中的整个文本，我希望自动换行出现在每一行的末尾。但是我也希望单词以语法上正确的方式切成薄片，或者根本不切成薄片：在下一行中，只显示不适合该行末尾的单词。

现在是这种情况：

Answer 1

您的CSS似乎设置为使用word-break: break-all。如果您更改/覆盖它以使用word-break: normal，那么它将不再发生。

演示：

div { width: 190px; background: #ffc; }

#div1 { word-break: break-all; }
#div2 { word-break: normal; }

<div id="div1">
  Without having to give a reason.
  Without having to give a reason.
  Without having to give a reason.
</div>
<br>
<div id="div2">
  Without having to give a reason.
  Without having to give a reason.
  Without having to give a reason.
</div>

Answer 2

不确定，如果您尝试过这种方法，但答案可能只是增加边框的大小

border-width = //put a value here