1. 犀牛前端部落首页
  2. CSS教程

pre标签实现响应式

pre标签实现响应式

在俺的博客上,有几篇文章的响应式有问题。

原来俺的那些文章都有问题,它们都有一段代码超出了正常的页面宽度,没有空格。

例如:

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

或者任何其他很长的命令。

俺的博客上的代码片段都被自动添加到一个代码标签中,并被添加到一个pre标签中。

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

pre {
  white-space: pre-wrap;
}

当一些单词太长时,它们仍然会破坏布局。要解决这个问题,还可以加上:

pre {
  word-break: break-all;
}

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4535.html

发表评论

登录后才能评论