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

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

例如:

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

或者其他非常长的命令。

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

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

pre {
  white-space: pre-wrap;
}

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

pre {
  word-break: break-all;
}