CODEWITHSUNDEEP
htmloverflowcontenteditable
Vlatko
Vlatko

Reputation: 1385

DIV contenteditable scrollbar for large text

Here is the code: http://jsfiddle.net/WRf2Y/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<head>
   <style>
   .private_msg{ 
       width:230px;
       height:19px;
       line-height:19px;
       padding:4px;
       border:1px solid silver;
       overflow:auto;
 }
   </style>
</head>
<body>
 <div class='private_msg' contenteditable="true"></div>
</body>

In Chrome is everything ok, but firefox and IE makes problem. When I input text in firefox or IE, text is in single line and only horizontal scrollbar is showed. In Chrome when text width is larger then div width , vertical scrollbar is showed(horiz. not) and everything is ok. Why firefoxand other browsers show div text different and how I can make same like in Chrome?

Please help

Upvotes: 1

Views: 2437

Answers (1)

Vlatko
Vlatko

Reputation: 1385

In CSS add:

word-wrap: break-word;

Upvotes: 2

Related Questions