响应式预标签

Question

我只是想在网页上显示终端输出.Atm我正在使用预标记来执行此操作,pre { white-space: pre-wrap; }您可以在http://irc.dabase.com/上看到.

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

Answer 1

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

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

选择所有pre元素(将其设置为pre#yourID或pre.yourClass选择特定元素pre)

pre {

允许pre包装单词分隔符和换行符.不像pre-line,pre-wrap将无法修改您的终端输出的全部.pre-line将通过将空格压缩到一个空格来修改您的终端输出,这可能会使查找精确的短语变得困难或者使用空格列格式化!看到这里

  white-space: pre-wrap;

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

  word-wrap: break-word;

此部分是可选的对齐文本,以便它完全填充该行.空间变宽,但数量不增加.

  text-align: justify;

}

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

如果您的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;
    }
}