不同浏览器中的pre标签有何不同？

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 

etc.

on chrome, IE and safari it shows:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 

并且退出屏幕

我需要一些帮助。另外一个问题是在Chrome、IE和Safari上，即使我写了display:inline;，它也显示为块状而不是行内。

解决方案：我使用了<span>标签，这样它就从一开始就是行内的了。就像你们说的，我去掉了{}，它就起作用了！谢谢！

- Paul Moldovan

---

你的问题很难理解。你能提供一个带有一些代码的现实世界的例子吗？ - MetalFrog

@MetalFrog 代码已经存在，只是因为格式不良而被隐藏。 - Sirko

肯定应该是<pre style="display:inline; white-space:pre-wrap;"></pre>吧？ - Undefined

你为什么要在样式中放置 {} 字符？ - kapa

感谢Sam和bažmegakapa。 - Paul Moldovan

Answer 1

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

另外，将一个带有textarea属性的标签中嵌套pre标签也很奇怪。

http://jsfiddle.net/A2MNN/

HTML：

<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
</pre>

CSS

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

- MetalFrog

---

这个span标签很久以前就被当做textarea使用了，我从来没有改过它的属性。不管怎样，它现在无法正常工作。在Firefox上设置宽度可以生效，但在Chrome上却不行。 - Paul Moldovan

在我的Chrome浏览器中可以工作。 JSFiddle能够正常工作，但是你的页面不能？ - MetalFrog

Answer 2

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

要解决您的实际问题，您应该描述问题（而不是一种完全错误的解决未指定问题的方式），即您想要实现什么，并展示您最好的尝试来解决它，作为一个完整和有效的HTML文档。

- Jukka K. Korpela