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.

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.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 17, 2014 at 6:47 siraj pathan asked May 17, 2014 at 5:53 siraj pathansiraj pathan 1,49511 gold badge1515 silver badges3131 bronze badges 3

• 1 i dont think contenteditable will let you do that. instead, you can wrap that contenteditable div inside of another div, and when the contenteditable expands, it will cause its parent to scroll. its why wysiwig editors like tiny mce get wrapped by iframes i think – chiliNUT Commented May 17, 2014 at 5:57
• i'm trying but still no result – siraj pathan Commented May 17, 2014 at 6:09
• height problem can be solved by position:absolute; but with this text is not vertically center aligned – siraj pathan Commented May 17, 2014 at 6:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
}

When u dont specify a height it will automatically grow vertically when more information is added into the div tage. But i think you will have to make sure the content is absolute and/or you can try this simple code to see if it helps

Try this, CSS code.

.scroll {
width:100px;
height:100px;
overflow:scroll;
}

HTML code

<div class="scroll">
SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE. SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.SOME TEXT HERE.
</div>