По-умолч. текст в тегах pre отображается с форматированием "как есть". Т.е. если строка длинная, то она будет заезжать за все возможные границы и портить всю вёрстку. По оси X страница будет скролиться именно из-за какой-нибудь одной длинной строки. Как этого избежать, но при этом оставить остальной функционал тега pre?
Часто для всех тегов pre просто прописывают CSS св-во "overflow" со знач. "auto":
pre {overflow: auto;}
Однако, горизонтальные скролбары в областях (блоках) тегов pre многим не нравятся, но многие не знают как сделать лучше, так, чтобы и форматирование осталось, и длинные строки текста переносились, не создавая проблем со скролингом. Оказалось, что такого эффекта хотели многие верстальщики и стандартизаторы из комитета развития и стандартизации CSS (конкретно из W3C) давно над этим позаботились. Поэтому в CSS имеется замечательное св-во "white-space" со знач. "pre-wrap":
pre {white-space: pre-wrap;}
Это сделает блок pre макс. эффективным. Останутся все его св-ва (вёрстка как есть) и также будут и автоматические переносы слов на строках, которые не умещаются в область блока. Это поистине бесподобно! Просто самое изящное решение. Лучше и не придумаешь.