предварительно тег отличается в браузерах

Question

Так что у меня этот код:

<span readonly="true" id="textarea" cols="60" rows="1"> 
    <pre style="{display:inline; white-space: pre-wrap; word-wrap:break-word;}"> SOME TEXT HERE </pre> 
</span> 

У меня есть две проблемы. один, когда я вводил очень длинную строку без пробелов или новых строк. Пример:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.

На светлячок и опера это показывает нормальный:

aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 
aaaaaaaaaaaaaaaa 

т.д.

на хром, IE и сафари это показывает:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

и выходит из экрана

Мне нужна помощь. О, и вторая проблема заключается в том, что на chrome, IE и сафари вместо показа встроенного, он показывает блок, хотя я написал display: inline;

SOLVED: вместо того, чтобы использовать его, он будет встроен с самого начала. И точно так же, как вы, ребята, сказали, что я достал {}, и это сработало! Спасибо

Answer 1

Я подозреваю, это потому, что вы не определили ширину, и в моем опыте word-wrap работает только на блочных элементов (вы можете установить inline-block, если вам это нужно, чтобы обернуть и быть инлайн).

Это также странно, что вы размещаете pre в пределах span, который имеет атрибуты textarea.

http://jsfiddle.net/A2MNN/

HTML:

<pre> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa. 
</pre> 

CSS

pre{ 
    width:40em; 
    word-wrap:break-word; 
    white-space:pre-wrap; 
} 

Answer 2

Ваша разметка является недействительным, таким образом, что браузеры не готовы обрабатывать, и ваш стиль лист нарушает правила CSS. Это означает, что вы должны ожидать, что браузеры будут отображать мусор, возможно различный мусор в разных браузерах.

Чтобы получить помощь по вашей реальной проблеме, вы должны описать проблему (а не полностью сломанный способ решения неуточненной проблемы), то есть то, что вы хотели бы достичь, и показать свою лучшую попытку решить ее, как полную и действительный HTML-документ.