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。

在firefox和opera上它显示正常：

aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa

等

在chrome，IE和safari上显示：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

并退出屏幕

我需要一些帮助。哦，第二个问题是在chrome，IE和safari而不是显示内联，它显示块，即使我写了display：inline;

已解决：而不是我使用它，所以从一开始就是内联。就像你们说我拿出{}一样有效！谢谢

Answer 1

我怀疑是因为你没有定义宽度，根据我的经验word-wrap只适用于块元素（如果需要它可以设置inline-block并且内联）。

您将pre放置在span属性textarea的{{1}}内也很奇怪。

http://jsfiddle.net/A2MNN/

<强> HTML：

<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
</pre>

<强> CSS

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

Answer 2

您的标记无效，浏览器无法处理，并且您的样式表违反了CSS规则。这意味着您应该期望浏览器在不同的浏览器上显示垃圾，可能是不同的垃圾。

要获得真正问题的帮助，你应该描述问题（不是完全破解解决未指明问题的方法），即你想要实现的目标，并展示你最好的解决方法，作为一个完整的有效的HTML文档。

浏览器中的pre标签不同

2 个答案: