最大宽度不会破坏单个单词，超过最大宽度

Question

使用max-width时，为什么会赢？＆＃34;打破＆＃34;比允许的更长的单词以及如何使其工作？

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

#changingParagraph {
  max-width: 100px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

使用overflow-wrap: break-word;（以前称为word-wrap: break-word）：

• 会将溢出的单词换行到下一行。
如果
• 的长度超过容器的长度，
• 只会破坏一个字。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用word-break: break-all：

• 将在内容达到指定宽度时中断，即使文本是单个单词。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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