Home-theater-designers
Textos longos podem parecer incontroláveis durante o design da web. Mas também podem ser inevitáveis e, às vezes, acabam cruzando fronteiras. Isso pode criar um Document Object Model (DOM) frouxo com um estouro desnecessário que não é amigável.
Mas aqui está a boa notícia: você pode lidar com textos tão longos envolvendo-os em uma nova linha usando CSS. Aqui, mostraremos como embrulhar textos longos e ininterruptos com CSS.
Como funciona o quebra automática de texto CSS
CSS lida com palavras longas esticadas usando o quebra de linha ou overflow-wrap propriedade.
anúncios aleatórios aparecendo no meu telefone
No entanto, quando não controlados, os navegadores lidam com esses textos longos por padrão. Eles não embrulharão palavras longas até receberem a instrução para fazê-lo.
Relacionado: O que você precisa saber sobre o DOM
As duas principais propriedades CSS mencionadas anteriormente funcionam da mesma maneira e você pode usá-las de forma intercambiável. No entanto, eles aceitam quatro valores ou sintaxes:
- quebra de palavra : Esta é a sintaxe CSS real que diz ao navegador para quebrar um texto longo em uma nova linha.
- normal : Quebra cada palavra nos pontos normais de separação dentro de um DOM. Não tem efeito em cordas longas.
- inicial : É a maneira padrão do navegador de lidar com strings. Como o normal sintaxe, não quebra palavras longas.
- herdar : Diz ao elemento filho para herdar a propriedade de seu pai. Mas ainda não funciona com textos longos, exceto que você aplica quebra de palavra para o elemento pai.
Como embrulhar palavras longas usando CSS Word Wrap
Encapsular palavras em uma nova linha com CSS é fácil e não requer ajustes complicados de CSS para funcionar.
Por exemplo, o longo H2 o texto dentro do contêiner de texto na imagem de exemplo abaixo cruza a linha da fronteira:
Vamos ver como podemos envolvê-lo na próxima linha usando o quebra de linha Propriedade CSS:
HTML :
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
CSS :
.wrap-it{
word-wrap: break-word;
}
Depois de embrulhar o longo H2 texto na imagem de amostra, aqui está a saída:
É isso! Agora você sabe agrupar palavras em uma nova linha dentro de seu DOM usando CSS.
encontre o dono de um número de telefone
Relacionado: Como direcionar parte de uma página da web usando seletores CSS
No entanto, como afirmado anteriormente, quebra de linha e overflow-wrap funcionam da mesma maneira e aceitam propriedades semelhantes.
Usar overflow-wrap em vez disso, apenas substitua quebra de linha com isso.
É importante agrupar palavras em uma página da web
Além de adicionar mais estética à sua página web, envolver os textos compacta o DOM. Mesmo que você controle o que entra em sua seção de conteúdo, os usuários podem postar links ou outras palavras que não cabem em seu contêiner de texto ou em todo o DOM.
Portanto, aplicar a quebra automática de texto a essa seção é necessário para manter o DOM intacto.
não consigo acessar o uefi bios windows 10Compartilhado Compartilhado Tweet O email Como usar consultas de mídia em HTML e CSS para criar sites responsivos
Quer fazer com que seu site tenha uma aparência incrível em dispositivos móveis? É hora de aprender a usar consultas de mídia em CSS.
Leia a seguir Tópicos relacionados- Programação
- CSS
- Modelo de Objeto de Documento
Idowu é apaixonado por qualquer tecnologia inteligente e produtividade. Em seu tempo livre, ele brinca com programação e muda para o tabuleiro de xadrez quando está entediado, mas também adora quebrar a rotina de vez em quando. Sua paixão por mostrar às pessoas o caminho da tecnologia moderna o motiva a escrever mais.
Mais de Idowu OmisolaAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever