У меня есть редактор tinymce (textarea) и один div. Всякий раз, когда я печатаю в текстовом редакторе, он показывает на предварительном просмотре div, который в реальном времени (200px) похож на предварительный просмотр stackoverflow.

Чего я хочу добиться, так это, если мы введем одно слово без пробела и, если его размер превысит 200 пикселей, я хочу перенести его на следующую строку.

Я пытался найти его, но пока не нашел решения. Я попробовал это решение, которое я нашел здесь

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

Это не очень хорошо работает в IE7. Это добавило левый и правый пробел. Так что мой div стал таким широким, как на следующем изображении

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

В IE8, который выглядит правильно, выглядит так.

img35.imageshack.us/img35/3915/ie8a.jpg (Пожалуйста, добавьте http: // и просмотрите)

Opera 10 тоже не совсем работает.

И тогда у меня есть количество строк JS также. Который

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

Если мы используем приведенный выше код CSS, он начинается отсчет со строки 2 во всех браузерах, кроме IE8 и 7.

Я хочу работать только на всех последних браузерах, таких как FF2,3, IE7, IE8, Safari, Chrome, Opera (последняя версия).

Пожалуйста, помогите мне. Благодарю.