浏览器兼容的自动换行和空白:pre? (拿2)

时间:2010-12-13 16:02:49

标签: css

好的,宇宙中的某个人必须知道答案。

我已经在这里问了这个问题,但仍然没有解决方案。

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

以下版本适用于Chrome和IE6 +,但在Firefox中,文字没有包装。

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

我发现无论出于何种原因,文本都不会在带有white-space:pre的Firefox中换行。并且-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;
}

另外,我试过了:

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

并且它在IE6或7中不起作用。

由于

2 个答案:

答案 0 :(得分:2)

我已经使用了一段时间了:

div{
    white-space: pre-wrap;
    font-family: monospace;
}

答案 1 :(得分:0)

它适用于IE8 +,Chrome,FF和Safari

div {
    white-space: pre;
    word-wrap: break-word;
}
@-moz-document url-prefix() { 
    div {
        white-space: normal !important;
    }
}