自适应预标签

Question

我只需想要在网页上显示终端输出。我正在pre tag使用http://irc.dabase.com/与pre { white-space: pre-wrap; }进行对比。

我的问题是，当我旋转我的iPhone6 IOS设备时，它通常无法正确重新格式化。 为什么是这个？你能提供一些好的CSS规则来使在网页上显示终端输出的用例更好吗？

this

Answer 1

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
}

以下是您需要逐步解释的规则：

选择所有pre元素（将其设置为pre#yourID或pre.yourClass以选择特定的pre）

pre {

允许预先包装分词和换行符。与pre-line不同，pre-wrap将不修改 all 的终端输出。 pre-line将通过将空格压缩到一个空白区来修改终端输出，这可能使查找精确短语变得困难或者使用空格列格式化！见here

  white-space: pre-wrap;

确保超过元素末尾的单词中断而不是隐藏（如示例链接）

  word-wrap: break-word;

此部分可选对齐文本以使其完全填充该行。空间变得更宽，但它们的数量不增加。

  text-align: justify;

}

可选地，此规则可以适合media-query，以便它仅适用于移动版本。但我相信通过简单地省略媒体查询将此规则应用于所有屏幕大小没有任何害处。

如果您的iphone的更广泛版本使pre规则停止运行，您应该检查是否已经存在media-query来应用规则当屏幕达到一定大小时pre。

您还可以尝试为更广泛的版本有意创建media-query，如果出现某种错误，可能会重新初始化样式。

例如：

包含适用于最小可能版本的规则

规则A：

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
}

然后除了规则A 还包含另一条规则来重新初始化横向风格

规则B：

@media all and (orientation:landscape)
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        text-align: justify;
    }
}

Answer 2

pre {
  white-space: pre-line;
  word-wrap: break-word;
  text-align: justify;
}

你可以尝试一次

Answer 3

你可以尝试这个来实现 -

pre {
    white-space: pre-line;
    word-wrap: break-word;
}