Ответные кодовые блоки

Question

Я видел много сайтов с кодовыми блоками на моем мобильном телефоне, но лишь некоторые из них были отзывчивыми. Если бы строки кода были длинными, я не мог видеть остальную часть кода. Я также сейчас разрабатываю веб-сайт с кодом. Как я могу сделать блок блоков отзывчивыми? Вот мой код.

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

Answer 1

Если вы не смогли получить линию номера работы с word-wrap:break-word, просто использовать подсветку синтаксиса Alex Горбачевым как и все остальные;) Нет необходимости изобретать колесо.

Answer 2

Одно из решений заключается в том, чтобы префикс блокировать свойство переполнения, чтобы скрыть избыток или вызвать его прокрутку. Другое решение - обернуть его.

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 
} 

Answer 3

pre { 
    padding: 0.1em 0.5em 0.3em 0.7em; 
    border-left: 11px solid #ccc; 
    margin: 1.7em 0 1.7em 0.3em; 
    overflow: auto; 
    width: 93%; 
    font-family: "Courier New", Courier, monospace, sans-serif; 

}