css - 响应式代码块

Question

我在手机上看到很多带有代码块的网站，但只有少数网站有响应。如果代码行太长，我将看不到其余代码。我现在也在开发一个带有代码的网站。如何使代码块响应？这是我的代码。

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

Answer 1

一个解决方案是给预 block 一个溢出属性来隐藏多余的部分或使其滚动。另一种解决方案是将其包装起来。

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
}