isso é conhecido
Tags definem texto pré-formatado e uma aplicação comum é representar código-fonte de computador. O texto entre um elemento PRe geralmente retém espaços e quebras de linha, mas infelizmente quando você escreve código dentro de uma tag, se você não o agrupar manualmente, ele o preservará sem alterar as quebras de linha.
Neste momento, você pode usar overflow:auto; (quando o código excede o limite do contêiner, a caixa de rolagem é exibida), mas esse método não é adequado para todos os navegadores convencionais e alguns navegadores truncarão diretamente o conteúdo excedido.
Como não há muitos lugares onde o código-fonte é usado neste site, eu realmente não me importava com esse problema antes. Há pouco tempo, um internauta entusiasmado relatou esse problema no QQ, então, quando mudei o tema desta vez, olhei. para uma solução e compartilhou-a.
pre { espaço em branco: pré-envoltório; /* CSS-3 */ espaço em branco: -moz-pre-wrap; /* Mozilla, desde 1999 */ espaço em branco: -pre-wrap; 6 */ white-space: -o-pre-wrap; /* Opera 7 */ Word-wrap: break-word; /* Internet Explorer 5.5+ */} De: Fazendo quebra automática de texto em CSS3, Mozilla, Opera e Ou seja
Esta solução CSS pode fazer com que o texto da pré-tag seja automaticamente quebrado. Testei-a em todos os navegadores que possuo e todos suportam IE6, IE7, IE8, Firefox, Opera, Safari e Chrome.
Somente quando você reduzir a janela para menos de 20 caracteres de largura ela ultrapassará a borda. Além disso, vi alguns posts compartilhando essa técnica CSS, dizendo que ela pode resolver o problema de quebra de linha de palavras longas, mas tentei e. ainda não funcionou.
-