Todos nós sabemos que a tag <pre> pode definir texto pré-formatado, e uma aplicação comum é representar código-fonte de computador. O texto entre um pré-elemento geralmente retém espaços em branco e novas linhas, mas infelizmente quando você escreve código dentro de uma tag <pre>, se você não quebrar manualmente as novas linhas, ele também será preservado para você em vez da quebra 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.
| pré { 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; espaço em branco: -o-pre-wrap; /* Opera 7 */ quebra de linha: quebra de palavra; /* Internet Explorer 5.5+ */ } |
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.
Ele só sai dos limites se você reduzir a janela para menos de 20 caracteres de largura.