Question

我在手机上看到很多带有代码块的网站，但只有少数网站有回应。如果代码行很长，我看不到代码的其余部分。我现在也正在开发一个包含代码的网站。如何使代码块响应？这是我的代码。

pre {
    width: 70%;
    font-family: 'Courier New', Courier, monospace;
    background-color: #b3b3b3;
    color: #ededed;
}

Answer 1

一种解决方案是为pre块提供溢出属性以隐藏多余的内容或使其滚动。另一种解决方案是将其包裹起来。

pre {
    white-space: pre-wrap; //css3
    white-space: moz-pre-wrap; //firefox
    white-space: -pre-wrap; //opera 4-6
    white-space: -o-pre-wrap; //opera 7
    word-wrap: break-word; //internet explorer
}

Answer 2

在2018年，对我有用的解决方案是使用white-space:属性，其值为“ 预包装”，如下所示：

.markdown-body pre>code {
    padding: 0;
    margin: 0;
    font-size: 100%;
    background: 0 0;
    border: 0;
    white-space: pre-wrap;
}

如果您可以将多个空格折叠起来，则“ 前行”值也可能适用。

值“ pre ”对我不起作用，因为它仅在源中有新行时才中断（当源中的URL较长时，这是无用的）。

以下是MDN描述white-space:属性的相关值的方法：

前提：保留空白序列。仅在源代码中的换行符和<br>元素处换行。

预包装：保留空白序列。行在<br>处以换行符断开，并根据需要填充行框。

前行：空白序列已折叠。行在<br>处以换行符断开，并根据需要填充行框。

Answer 3

pre {
  padding: 0.1em 0.5em 0.3em 0.7em;
  border-left: 11px solid #ccc;
  margin: 1.7em 0 1.7em 0.3em;
  overflow: auto;
  width: 93%;
  font-family: "Courier New", Courier, monospace, sans-serif;

}

Answer 4

如果您无法使用word-wrap:break-word使用行号，只需像其他人一样使用Alex Gorbatchev的语法高亮显示器;）无需重新发明轮子。

响应代码块

4 个答案: