我用的是“<pre></pre>”标签，但是我发现用上去后有问题，它只是一行显示，如果里面的代码太长，它不会自动截断，另起一行。那么这个 .pre 应该怎么写呢？我CSS基本能看懂，但是不会写。我想到了参考 itellyou 上的，我发现它里面也是用<pre></pre>来作为下载链接的CSS的。

在 Chrome 浏览器上右击“检查”，都能看到，包括它 .pre 的代码，如下：

pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.428571429;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}

但是我发现按照上面的写了之后，还是不会自动截断。后来我观察到它后面还有一段：

pre {
white-space: pre-wrap;
}

这个很重要啊！！！加上之后就 OK 了，最终我的代码是这样的：

pre{display: block;word-break: break-all;word-wrap:break-word;white-space: pre-wrap;border:1px dotted #C8D8F2;font-size:12px;padding:5px;margin:2px 0 0 0;line-height: 1.428571429;border-radius: 4px;}

后面的“border-radius”很重要，有圆角效果哦！