pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。(即源代码)
for i = 1 to 10
print i
next i
那么问题来了，当我们在输入了一句很长的代码时，例如下边的这条：
<meta name="viewport" content="width=device-width,initial-scale=1">
当我们放在窄屏时，<pre> 标签不会自动换行，而其他元素因为宽度设置的百分比或者像素大小，会自动换行，这样就会在屏幕右边挤出来空白部分，影响布局，所以是个很不好的效果，同时<pre> 标签会自动对内部文字的字体进行设置，结果为 font-family: monospace; 当然了可以对其进行修改，不过这种字体不错，比较适合显示代码。
下面来谈一下解决第一个不换行的问题。（尤其在手机上）
暂时的解决方法是利用overflow:scroll;
下面具体的谈一下overflow的属性吧。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
以上就是overflow的各个属性了，具体用哪个得自己看，我上边的用的是auto；还未进行测试。