最大宽度未打破单个单词，超过最大宽度 [英] Max-width not breaking single words, exceeding max-width

问题描述

使用 max-width 时，为什么不打破"比允许的长的单词，我将如何使其正常工作?

When using max-width why won't it "break" words that are longer than allowed and how would I go about making it work?

JSFiddle

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>

推荐答案

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

The <p> is not exceeding the max-width length that you have set. The issue is that the text is overflowing so it goes past the length you set for your element. There are a few different methods for breaking text to the next line.

使用 over-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>

使用断字:全部破解:

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

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; 是最佳选择.

For the most readable and clean looking breaks, overflow-wrap: break-word; is the best option.

这篇关于最大宽度未打破单个单词，超过最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！