Efeitos de Texto – Parte 2: word-wrap

word-wrap (Quebra de Palavra)

Atualmente, quando definimos uma largura para nossa caixa de texto as palavras vão se colocando em linhas para ocupar toda a largura disponível na caixa, mas quando colocamos palavras muito longas, que não cabem na largura disponível, elas se expandem para fora ou na pior das hipóteses deformam o tamanho da caixa.

Um exemplo disso:

Este é um exemplo quando UmaPalavraéMuitoGrandeApontoDeNaoCaberEmUmaCaixadeTexto e ela se expande para fora.

A nova capacidade de quebra da palavra, word-warp, é uma propriedade muito útil que nos permite forçar o texto a se juntar, mesmo que isso signifique dividir a palavra no meio.
O word-wrap tem dois valores possíveis: normal ou break-word. Sendo que o “word-wrap: normal” faz com que as palavras não se cortem, o que seria o comportamento normal que conhecemos até hoje. E o valor “word-wrap: break-word” que vai fazer o efeito que desejamos. Podemos definir com um simples código:

Este é um exemplo quando UmaPalavraéMuitoGrandeApontodeNaocaberEmUmaCaixadeTexto e ela se expande para fora. Mas a propriedade word-wrap permite que a palavra se recorte, para caber na largura que nós definimos.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DE SITES COMO HTTP://WWW.KREMALICIOUS.COM


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

Nenhum comentário ainda.

Join the Conversation