CODEWITHSUNDEEP
jqueryhtmlcss
immacolta
immacolta

Reputation: 23

Why does a content editable div fixed on given dimensions still overflow if the text is long enough?

I was wondering how one could stop words from overflowing if they are too long for a content editable div, or at least force them to break. Given the following code:

.test{
  width: 200px;
  height: 160px;
  max-width: 200px;
  max-height: 160px;
  background: green;
  overflow-x: hidden;
  overflow-y: scroll;
}

<div class="test" contenteditable=true>delete this and hold down any letter, watch as the div expands. how can i stop this?</div>

So, thoughts? How could I force this to not change?

Upvotes: 2

Views: 1523

Answers (1)

UserDy
UserDy

Reputation: 357

First off you forgot to enclose "true" in parentheses. So replace contenteditable=true with contenteditable="true".

Heres the solution. Add the following css to the element with contenteditable.

word-break: break-all;

So it should be 

.test{
  width: 200px;
  height: 160px;
  max-width: 200px;
  max-height: 160px;
  background: green;
  overflow-x: hidden;
  overflow-y: scroll;
  word-break: break-all;
}

You should also enclose the text you want to edit in span tag and give the contenteditable attribute to that rather than the div. It makes all other text inside the div editable when you might want to edit specific text only. It also removes HTML elements if you delete all the text.

Upvotes: 2

Related Questions