CSS中的响应式前标签

39 阅读1分钟

在我的博客上,有几篇文章的响应性出现了一些问题。结果发现是代码片段的问题

我的博客上有几篇文章的响应速度出现了一些问题。

结果发现我的那些文章有问题,它们都有一个代码段,超出了正常的页面宽度,没有一个空格。

比如说

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

或任何其他很长的命令。

我的博客上的代码片段都被自动添加到code 标签内,并在里面添加到pre 标签。

默认情况下,pre 标签上的CSSwhite-space 属性被设置为normal ,为了解决这个问题,我们把它设置为pre-wrap

pre {
  white-space: pre-wrap;
}

当一些词太长时,它们仍然会破坏布局。为了解决这个问题,还要添加。

pre {
  word-break: break-all;
}