响应代码块

Question

我在手机上看到很多带有代码块的网站,但只有少数网站有响应.如果代码行很长,我看不到代码的其余部分.我现在也正在开发一个包含代码的网站.如何使代码块响应？这是我的代码.

pre {
    width: 70%;
    font-family: 'Courier New', Courier, monospace;
    background-color: #b3b3b3;
    color: #ededed;
}

Answer 1

一种解决方案是为pre块提供溢出属性以隐藏多余的内容或使其滚动.另一种解决方案是将其包裹起来.

pre {
    white-space: pre-wrap; //css3
    white-space: moz-pre-wrap; //firefox
    white-space: -pre-wrap; //opera 4-6
    white-space: -o-pre-wrap; //opera 7
    word-wrap: break-word; //internet explorer
}