浏览器中的pre标签不同答案

【问题标题】：pre tag different in browsers浏览器中的pre标签不同
【发布时间】：2012-05-24 15:03:10
【问题描述】：

所以我有这个代码：

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

我有两个问题。当我引入一个很长的字符串时，没有空格或换行符。示例：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

在firefox和opera上显示正常：

aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa

等等

在 chrome、IE 和 safari 上显示：

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

然后退出屏幕

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

已解决：我没有使用它，所以它从一开始就是内联的。就像你们说的那样，我取出 {} 并且它起作用了！谢谢

【问题讨论】：

你的问题很难理解。你能用一些代码提供一个真实的例子吗？
@MetalFrog 代码存在，但由于格式错误而被隐藏。
当然应该是
?
你为什么要把{} 字符放入样式中？
谢谢 Sam 和 bažmegakapa。

标签： html css word-wrap pre

【解决方案1】：

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

您将pre 放在具有textarea 属性的span 中也很奇怪。

http://jsfiddle.net/A2MNN/

HTML：

<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
</pre>

CSS

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

【讨论】：

span 很久以前是一个文本区域。我只是从未更改过属性。无论如何它不起作用。它适用于 Firefox 设置宽度，但不适用于 chrome。
在 Chrome 中为我工作。小提琴有效，但您的页面无效？

【解决方案2】：

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

要获得有关您真正问题的帮助，您应该描述问题（不是解决未指定问题的完全错误的方法），即您想要达到的目标，并展示您解决问题的最佳尝试，作为一个完整且有效的 HTML 文档。

【讨论】：