CODEWITHSUNDEEP
htmlcsscontenteditable
Kaleb McKinney
Kaleb McKinney

Reputation: 41

How can I stop a contenteditable div from overflowing?

I am working with a contenteditable div and I have set a height to it and have attempted to cut off the field once it reaches that height with overflow: hidden; and text-overflow: hidden; but instead of hiding any of that text, it just overflows the the div. How can I fix this?

#editor {
    height: 1100px;
    border: .5px solid gray;
    padding: 75px;
    padding-bottom: 75px;
    text-overflow: clip;
}
#editor:focus {
    outline: none;
}
    <div id="editor" contenteditable="true"></div>

Upvotes: 4

Views: 2047

Answers (1)

AdityaSrivast
AdityaSrivast

Reputation: 1084

Try overflow-y: scroll instead for #editor

#editor {
    height: 1100px;
    border: .5px solid gray;
    padding: 75px;
    padding-bottom: 75px;
    text-overflow: clip;
    overflow-y: scroll;
}
#editor:focus {
    outline: none;
}
<div id="editor" contenteditable="true"></div>

Upvotes: 3

Related Questions