CSS 中的响应式 pre 标签

在我的博客上，我在一些文章中遇到了一些响应性的问题。结果发现是一些代码片段引起的。

在我的博客上有一些文章，在这些文章中，有一些代码片段超出了正常页面宽度而没有空格。

例如：

1	cd /some/super/long/super/long/folder

或者其他非常长的命令。

我的博客上的代码片段都是自动添加在 code 标签内，而 code 标签内部又包含了一个 pre 标签。

默认情况下，pre 标签上的 CSS white-space 属性被设置为 normal。为了解决这个问题，我们将其设置为 pre-wrap：

1
2
3

pre {
  white-space: pre-wrap;
}

当某些单词太长时，它们仍然可能破坏布局。为了解决这个问题，还需添加以下代码：

1
2
3

pre {
  word-break: break-all;
}

tags: [“CSS”, “responsiveness”, “code snippets”]