css - 空白：移动设备上的预包装

Question

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

有没有其他选择，或者我可以参考一个兼容性表？

Answer 1

预包装

此值的行为与 pre 值相同，只是它添加了额外的换行符以防止文本超出元素的框。（怪癖模式）

从这个mozilla 帖子（单击“移动”选项卡）以及该white-space属性在此处标记为“NeedsMobileBrowserCompatibility”的事实（参见此处），似乎移动设备尚不支持空白。

解决方法 #1

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

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

word-wrap: break-word;到班级。（请参阅此 css-tricks 帖子）

像这样的东西：

标记

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

小提琴

解决方法 #2

将文本包装在只读textarea元素中。显而易见的问题是您必须提前知道文本的宽度/高度。（请参阅此 SO 帖子）

小提琴