Wrap Text inside fixed Div with css or javascript?

Question

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).

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

function GetWrapedText(text, maxlength) {    
    var resultText = [""];
    var len = text.length;    
    if (maxlength >= len) {
        return text;
    }
    else {
        var totalStrCount = parseInt(len / maxlength);
        if (len % maxlength != 0) {
            totalStrCount++
        }

        for (var i = 0; i < totalStrCount; i++) {
            if (i == totalStrCount - 1) {
                resultText.push(text);
            }
            else {
                var strPiece = text.substring(0, maxlength - 1);
                resultText.push(strPiece);
                resultText.push("<br>");
                text = text.substring(maxlength - 1, text.length);
            }
        }
    }
    return resultText.join("");
}