html - max-width 不打断单个单词，超过max-width

Question

当使用 max-width 时，为什么它不会“破坏”超过允许长度的单词，我该如何让它工作？

JSFiddle

function input() {
  var inputText = document.getElementById("inputField").value;
  document.getElementById("changingParagraph").innerHTML = inputText;
}

#changingParagraph {
  max-width: 100px;
}

<input type="text" id="inputField" oninput="input()">
<p id="changingParagraph">
</p>

Answer 1

<p>不超过 max-width您设置的长度。问题在于文本溢出，因此超出了您为元素设置的长度。有几种不同的方法可以将文本换到下一行。

---

使用 overflow-wrap: break-word; (以前称为 word-wrap: break-word ):

• 会将溢出的单词换行到下一行。
• 只有当单词的长度超过容器的长度时才会中断单词。

function input() {
  var inputText = document.getElementById("inputField").value;
  document.getElementById("changingParagraph").innerHTML = inputText;
}

#changingParagraph {
  max-width: 100px;
  overflow-wrap: break-word;
}

<input type="text" id="inputField" oninput="input()">
<p id="changingParagraph">
</p>

---

使用 word-break: break-all :

• 当内容达到指定宽度时会中断，即使文本是单个单词也是如此。

function input() {
  var inputText = document.getElementById("inputField").value;
  document.getElementById("changingParagraph").innerHTML = inputText;
}

#changingParagraph {
  max-width: 100px;
  word-break: break-all;
}

<input type="text" id="inputField" oninput="input()">
<p id="changingParagraph">
</p>

---

对于最易读和最干净的休息，overflow-wrap: break-word;是最好的选择。