HarshWombat HarshWombat - 3 months ago 7
CSS Question

Max-width not working on single words exceeding 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



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

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. Give your #changingParagraph a word-break: break-all;.

CSS

#changingParagraph {
  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>

Comments