浏览器兼容的自动换行和空白:pre？

Question

我需要div中的文本来保存和包装.到目前为止,我很难找到解决方案.我能找到的最佳解决方案并不适用于所有浏览器.

以下适用于Chrome和IE6 +,但在Firefox中,文本不包装.

 white-space: pre; 
 word-wrap: break-word;

我发现无论出于何种原因,文本都不会在Firefox中包含white-space:pre.并且-moz-pre-wrap在Firefox 3.5中不起作用(为什么??),只是预先换行.但是当我在列表中添加预包装时,IE 6和7不起作用.很沮丧.

代码:

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre; 
  word-wrap: break-word;
}

Answer 1

CSS3属性并不总是如我们所希望的那样工作:).不过,我没有看到在混合点white-space:pre和word-wrap:break-word.

除非<br />遇到标记,否则前者不会包装文本.第二个将做相反的事情:即使在一个单词的中间,也可以在必要时打破单词.它们似乎存在冲突,并且最明显的答案就是为什么不同的浏览器对这些属性的反应不同

• 他们支持这两个属性中的任何一个
• 由于它们存在冲突,因此每个浏览器的优先级未定义或不同

(我不能确定,我不是真正的专家).

我建议你仔细看看这个和这个,然后决定在你的特定情况下应该使用什么.

[编辑]

您可能想尝试这个(应该适用于所有浏览器):

white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* ancient Opera */
white-space: -o-pre-wrap; /* newer Opera */
white-space: pre-wrap; /* Chrome; W3C standard */
word-wrap: break-word; /* IE */

我没有测试过这个,但我相信它应该为你做的伎俩.

Answer 2

我知道这是一个非常古老的问题,但是由于我刚刚碰到它,我觉得有回答的冲动.

我的解决方案是:

使用white-space: pre-wrap;几乎相同white-space: pre;,只是添加换行符.(参考:http://www.quirksmode.org/css/whitespace.html)

然后我会专门针对旧的 - 即使用条件评论(参考:http://www.quirksmode.org/css/condcom.html)或浏览器特定的css hacks(http://paulirish.com/2009/browser-具体的css-hacks /).

第二种方法的示例:

.introsub {
  position: relative;
  top: 30px;
  left: 25px;
  width: 550px;
  font-weight: normal;
  line-height: 1.5em;
  overflow: auto;
  margin: 0;
  padding: 1.5em; 
  white-space: pre-wrap; 
  word-wrap: break-word;
}

/* IE6 and below */
* html .introsub  { white-space: pre  }

/* IE7 */
*:first-child+html .introsub { white-space: pre  } 

这足以迫使它包装.