A Aldeia Numaboa ancestral ainda está disponível para visitação. É a versão mais antiga da Aldeia que eu não quis simplesmente descartar depois de mais de 10 milhões de pageviews. Como diz a Sirley, nossa cozinheira e filósofa de plantão: "Misericórdia, ai que dó!"

Se você tiver curiosidade, o endereço é numaboa.net.br.

Leia mais...

Informática Numaboa - Tutoriais e Programação

Domando a tag PRE

Sab

17

Jan

2009


15:05

(5 votos, média 4.40 de 5) 


Uma das tags que costumo usar com frequência é a <pre>. Durante muito tempo tomei um belo de um baile por não conseguir obter quebras de linha para evitar que textos longos dentro destas tags bagunçassem toda a formatação da página. Agora aprendi como fazer smile

O marcador <pre> é uma mão na roda quando se quer que o texto seja apresentado exatamente como escrevemos, respeitando todos os espaços. Para mim, uma das maiores vantagens é quando apresento trechos de código fonte e quero manter a identação das linhas. O HTML, quando encontra dois ou mais espaços, reconhece apenas o primeiro e despreza os restantes. A não ser que se use &nbsp; para criar espaços adicionais, não tem como obter a identação desejada. Taí a vantagem de se usar a tag <pre>, que nos economiza muita digitação de nbsp e a chatice (e dificuldade) de contar os tais dos espaços. Por exemplo, compare

<pre>

for( $i=0; $i<10; $i++ ) {
&nbsp;&nbsp;&nbsp;if( $teste == 0 ) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
&nbsp;&nbsp;&nbsp;}
}
</pre>

com

<pre> for( $i=0; $i<10; $i++ ) { if( $teste == 0 ) { return false; } else { return true; } } </pre>

Acho que nem é preciso explicar, o visual já falou tudo. Até este ponto, tudo bem. Acontece que os diversos browsers "entendem" a tag <pre> de formas diferentes, especialmente quando se trata de quebra de linha. Tentei de tudo, mas vira e mexe tinha uma supresa: funcionava para o IE, mas não no Firefox 2 e no Opera; funcionava no Opera 6, mas não no Opera 7. Depois de muito fuçar e de colecionar algumas informações, cheguei numa "receita" que, até o momento, está funcionando. Passo-a para vocês:

overflow-x: auto; /* Cria barra de rolagem horizontal se necessário; para Firefox 2, o Firefox 3 não precisa */ white-space: -moz-pre-wrap !important; /* Mozilla, desde 1999; NÃO tire a observação !important; */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */

Você pode usar estas propriedades em folhas de estilo (CSS). O estilo pode ser incluído no cabeçalho de cada página ou estar num arquivo à parte que é incorporado às páginas. Por exemplo:

... ...

Depois, em cada marcador <pre> que você quiser, aplique a classe definida na folha de estilos:

<pre class="quebra"> ... o texto que você quiser </pre>

E isto é tudo, por enquanto... quem é que sabe quais serão as surpresas que novas versões de navegadores poderão nos trazer? Até lá, acho que isto quebra um galho.

Abraço da vó Vicki vovo

Agradecimentos

Já tinha descoberto algumas coisas quando encontrei as dicas de T. Longren. Quero agradecer pela sua contribuição postada no Unwakeable Blog.

mfx broker инвестициикупи лови интернет магазинцены никас александр лобановскийлобановский александр игоревич классадреса никасЛобановский

Informações adicionais