height is increasing automatically of div with contenteditable="true"

css, html, javascript, jquery

Solution

You can wrap the contenteditable div in 2 containers, one for the width and height with `overflow:auto;` and one for the `display-table;` property so the text is horzontaly centered :

DEMO

HTML :

<div class="container1">
    <div class="container2">
        <div contenteditable="true" class="textarea"></div>
    </div>
</div>

CSS :

.container1{
    height:60px;
    width:273px; 
    overflow:auto;
    border:1px solid green;
}
.container2 {
    min-height:100%;

    display:table;
}
.textarea {
    width:273px;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    outline: none;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    word-wrap: break-word;
    overflow:hidden;
}

Problem

I've div with property `contenteditable="true"`. ``` <div contenteditable="true" class="textarea"></div> ``` Requirements 1. Text should be center aligned vertically and horizontally. 2. Height should not increase automatically with increase in content inside that div, if content increases inside div, scrollbar need to display. Here is js Fiddle if you want, use jquery too.

Original source