白色空间：预先包装在移动设备上

Question

我认为white-space:pre-wrap是一个非常受支持的CSS规则（它甚至不能用于caniuse）但是当我在手机上查看结果时，我会看到一面大墙。

有没有替代方案，或者我可以参考的兼容性表格？

Answer 1

  

预包装

     

除了添加额外的行外，此值的行为与pre值相同   中断以防止文本突破元素的框。 （Quirksmode）

从这个mozilla post（点击'移动'标签）以及white-space属性标记为'NeedsMobileBrowserCompatibility'（参见here）的事实，它看起来像白色 - 移动设备尚不支持空间。

解决方法＃1

移动设备支持word-wrap属性 （请参阅here）

所以你可以产生相同的非常相似的结果包装<pre>标签中的标记并添加

word-wrap: break-word;到班上。 （见this css-tricks post）

这样的事情：

标记

<pre>his is the test        paragraph.
    It has all kinds of odd tabs              and spacing in
the
           HTML source code.
    Should they                 be preserved?</pre>

CSS

pre
{
    width: 100px;
    border: 1px solid orange;
    word-wrap: break-word;
}

<强> FIDDLE

解决方法＃2

将文本换行为只读textarea元素。这个问题的一个明显问题是您必须提前知道文本的宽度/高度。 （见this SO post）

<强> FIDDLE