Text innerhalb eines festen Divs mit css oder javascript umbrechen?

Question

Ich habe tinymce Editor (textarea) und ein div. Wann immer ich in den Text-Editor eingeben, zeigt es in der Vorschau div, die (200px) in Echtzeit, die ähnlich wie Stackoverflow Vorschau ist.

Was ich erreichen möchte, ist, wenn wir ein Wort ohne Leerzeichen eingeben und wenn 200px überschreiten, möchte ich es in die nächste Zeile umbrechen.

Ich habe versucht, sie zu finden, aber ich habe die Lösung noch nicht gefunden. Ich habe diese Lösung versucht, die ich hier gefunden habe

.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 */ 
}

Es funktioniert nicht gut im IE7. Es hat den linken und rechten Raum hinzugefügt. So mein div werden so breit wie das folgende Bild

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

Im IE8, der korrekt ist, sieht das so aus.

img35.imageshack.us/img35/3915/ie8a.jpg (Bitte http:// hinzufügen und ansehen)

Auch Opera 10 funktioniert nicht vollständig.

Und dann habe ich auch noch line count js. Die ist

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

Wenn wir den obigen CSS-Code verwenden, beginnt die Zählung in allen Browsern außer IE8 und 7 in Zeile 2.

Ich möchte nur auf alle neuesten Browser, die FF2, 3, IE7, IE8, Safari, Chrome, Opera (neueste) ist funktioniert.