css - 空白 :pre-wrap on mobile device

Question

我认为 white-space:pre-wrap 是一个得到很好支持的 CSS 规则(它甚至没有在 caniuse 上使用)，但是当我在手机上查看结果时，我看到一个大的文字墙。

是否有其他替代方案，或者我可以引用兼容性表？

Answer 1

pre-wrap

This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box. (Quirksmode)

从此mozilla post (单击“移动”选项卡)以及 white-space属性被标记为“NeedsMobileBrowserCompatibility”(请参阅​​ here )，移动设备似乎尚不支持空白。

解决方法#1

word-wrap移动设备支持属性(请参阅 here)

因此，您可以生成相同非常相似的结果，将标记包装在 <pre> 中标签并添加

word-wrap: break-word;到类(class)。 (参见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