css中响应式logo_CSS中的响应式前置标签

css中响应式logo

I’ve had some problems with responsiveness in a few posts, on my blog.

在我的博客上的几篇文章中，我在响应能力方面遇到了一些问题。

Turns out those posts I had problems on, they all had a snippet of code that went beyond the normal page width without a space.

原来我遇到问题的帖子，它们都有一小段代码，超出了正常页面宽度，没有空格。

For example

例如

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

or any other very long command.

或其他任何长命令。

Code snippets on my blog are all automatically added inside a code tag, and inside it into a pre tag.

我博客上的代码段都自动添加到了code标签中，然后又添加到了pre标签中。

By default the CSS white-space property on the pre tag is set to normal, and to fix this problem we set it to pre-wrap:

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

pre {
  white-space: pre-wrap;
}

When some words are too long they can still break the layout. To fix this, also add:

当某些单词太长时，它们仍然可以破坏布局。 要解决此问题，还添加：

pre {
  word-break: break-all;
}

翻译自: https://flaviocopes.com/responsive-pre-tags/

css中响应式logo