Wrap Text inside fixed Div with css or javascript ?

Question

Hi,

I have tinymce editor(textarea) and one div. Whenever i type inside the text editor, it shows at the preview div which is (200px) in real time which is looks alike stackoverflow preview.

What I want to achieve is, if we type one words without space and if exceed 200px, I want to wrap it to the next line.

I tried to find it and I didn't find the solution yet. I tried this solution which i found here

.preview_desc 
{   
    word-wrap: break-word; /* IE>=5.5 */  
    white-space: pre; /* IE>=6 */  
    white-space: -moz-pre-wrap; /* For Fx<=2 */   
    white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3 */ 
}

It doesn't work well in IE7. It added the left and right space. So my div become so wide like the following image

http://img38.imageshack.us/img38/2650/ie7g.jpg

In IE8, which is correct looks is like this.

img35.imageshack.us/img35/3915/ie8a.jpg (Please add http:// and view)

Opera 10 is not totally working also.

And then I have line count js also. Which is

var height = document.getElementById('divpreview').clientHeight;
var lines = Math.round(height / 10); 
document.getElementById('lines').innerHTML = lines;  
if(document.getElementById('divpreview').innerHTML == "")
{
     document.getElementById('lines').innerHTML = 0;  
}

If we use the above css code, it starting count from line 2 in all browsers except IE8 and 7.

I only want to works on all latest browser which is FF2,3,IE7,IE8,Safari,Chrome,Opera (latest).

Please help me out. Thanks.

Answer 1

I may be misunderstanding your issue, but it seems like all you need is a bit of CSS, specifically a max-width (for all the non-idiotic browsers) and a width with a wacky IE expression (for IE).

For instance

max-width:200px;
_width:expression(document.body.clientWidth > 200? "200px": "auto" );

When you combine that with the CSS you already have, it seems like it should work.

Answer 2

@Natrium: I've got problem same like you regarding text-wrap. However in IE7 I found the solution. Add this css code into your table properties: table-layout:fixed; this should solve the problem.

However, I'm also trying using opera 10.10 (latest ver) its doesn't wrap at all. It seems that opera doesn't support any of this function. Correct me if i'm wrong (just newbie) :D