Saltar navegación

Espazos en branco

Antes de comezar...

Este punto é unha ampliación de contidos. Non o veremos durante o curso.

Espazos en branco

O tratamento dos espazos en branco no código HTML é unha das características máis desconcertantes para os deseñadores web que comezan a crear páxinas,  xa que os navegadores eliminan automaticamente todos os espazos en branco sobrantes.

No estándar HTML un "espazo en branco" pode ser un salto de liña, un tabulador e un espazo en branco normal. Os navegadores eliminan de forma automática todos os espazos en branco sobrantes salvo o espazo en branco que separa as palabras do texto.

A única excepción deste comportamento é a etiqueta <pre> de HTML, utilizada para mostrar texto que xa ten formato (o seu nome vén de preformatar) e que polo tanto respecta todos os espazos en branco e todos os saltos de liña.

A propiedade white-space permite variar o comportamento dos espazos en branco. O estándar CSS 2.1 define cinco valores diferentes de tratamento de espazos en branco:

  • normal: os espazos en branco sobrantes e os saltos de liña elimínanse.
  • pre: non se eliminan os espazos en branco sobrantes e só se mostran os saltos de liña incluídos no texto orixinal. Este comportamento pode provocar que os contidos de texto se saian do seu elemento colector.
  • nowrap: compórtase igual que normal nos espazos en branco, pero non engade saltos de liña no texto orixinal, polo que os contidos se poden saír do seu elemento colector.
  • pre-wrap: compórtase igual que pre, pero introdúcense os saltos de liña que sexan necesarios para que os contidos de texto nunca se saian do seu elemento colector.
  • pre-line: elimínanse os espazos en branco sobrantes, pero respéctanse os saltos de liña orixinais e créanse tantos saltos de liña como sexan necesarios para que o contido de texto non se saia do seu elemento colector.

Como as explicacións incluídas no estándar CSS 2.1 poden chegar a ser confusas, a seguinte táboa resume o comportamento de cada valor:

Valor Respecta espazos en branco Respecta saltos de liña Axusta as liñas
normal non non si
pre si si non
nowrap non non non
pre-wrap si si si
pre-line non si si

Comportamento dos valores para os espazos en branco en CSS

Comportamento dos valores para os espazos en branco en CSS.