浏览器兼容的字包装和空格：pre？ [英] Browser compatible word wrap and whitespace: pre?

问题描述

我需要一个div中的文本，以保留和换行。到目前为止，我有一个艰难的时间提出一个解决方案。我找到的最佳解决方案不适用于所有浏览器。

以下可在Chrome和IE6 +中使用，但在Firefox中，文本不包装。

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

我发现无论出于什么原因，文本不会在带有空格的Firefox中换行：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; 
} 
  

解决方案

CSS3属性总是工作，因为我们希望他们工作:)。
仍然，我没有看到一个混合白空间：pre 和 word-wrap：break-word 。

前者不会包装文本，除非< br /> 遇到。第二个将做相反的事情：每当有必要时，即使在一个单词的中间，打破单词。它们似乎是冲突的，最明显的答案为什么不同的浏览器对这些属性不同的反应是

• 他们支持

>

我建议你仔细看看此和此

您可能想要使用尝试这个（应该在所有浏览器中工作）：

  white-space：-moz-pre-wrap; / * Firefox * / 
 white-space：-pre-wrap; / *古代歌剧* / 
白色空格：-o-pre-wrap; / * newer Opera * / 
 white-space：pre-wrap; / * Chrome; W3C标准* / 
 word-wrap：break-word; / * IE * / 
  

我没有测试这个，但我相信它应该你。

I need text within a div to be preserved and to wrap. So far I am having a tough time coming up with a solution. The best solution I've been able to find doesn't work for all browsers.

The following works in Chrome and IE6+, but in Firefox the text is not wrapping.

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

I've found that for whatever reason the text does not wrap in Firefox with white-space:pre. And -moz-pre-wrap does not work in Firefox 3.5 (why??), only pre-wrap. BUT when I add pre-wrap to the list, IE 6 and 7 don't work. Very frustrating.

The code:

.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;
}

解决方案

The CSS3 properties don't always work as we would like them to work :). Still, I don't see a point in mixing white-space:pre and word-wrap:break-word.

The former will not wrap the text unless a <br /> tag is encountered. The second one will do the opposite: break the words whenever it's necessary, even in the middle of a word. They seem to be in conflict, and the most obvious answers to why different browsers react differently to these properties is that

• they support either of the two properties
• since they are in conflict, the precedence is undefined or different in each browser

(I can't be sure though, I'm not really an expert here).

I suggest you take a closer look at this and this and then decide on what should be used in your particular case.

[EDIT]

You might want to try this (should work in ALL browsers):

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

I haven't tested this, but I believe it should do the trick for you.

这篇关于浏览器兼容的字包装和空格：pre？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！