CODEWITHSUNDEEP
htmlcssdomcontenteditable
n.y
n.y

Reputation: 3490

Incorrect effect of content-editable attribute on the div content render

Why adding contenteditable="true" to a span inside a div, cause break line?

div{
  width: 110px;
  height: 80px;
  border:1px solid #5aa; 
}
<div>
  <span>IamANowSpaceLineSample</span>
</div>

<br/>

<div>
  <span contenteditable="true">IamANowSpaceLineSample</span>
</div>

Upvotes: 0

Views: 81

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

The text "IamANowSpaceLineSample" is longer than the 110px width you have allocated to your div. It has no spaces and no css rule saying that it can break the word to fit, so it isn't getting wrapped to fit inside its parent div, and its extending outside the div.

However when you add contenteditable="true" the styling changes and the following gets applied (as you can see if you check the element in the element inspector):

span[Attributes Style] {
    -webkit-user-modify: read-write;
    word-wrap: break-word;
    -webkit-line-break: after-white-space;
}

This sets word-wrap: break-word; which forces the browser to wrap the text to fit inside the 110px width of the parent div.

If you want to prevent it wrapping, you can use white-space: nowrap; (or make the div wide enough to fit!)

Examples:

div{
  width: 110px;
  height: 20px;
  background-color: #aaa; 

  margin-bottom:2em;
}

span.nowrap{
white-space: nowrap;
}
<div>
  <span>IamANowSpaceLineSample</span>
</div>

<div>
  <span contenteditable="true">EditableWithDefaultStyle</span>
</div>

<div>
  <span class = "nowrap" contenteditable="true">EditableWithNoWrapStyle</span>
</div>

Upvotes: 1

Related Questions