Como alterar a moldagem de texto padrão com HTML e CSS
Ao contrário do papel, as páginas da web podem quase infinitamente estender para os lados. Por mais impressionante que seja, não é algo que realmente precisamos durante a leitura. Os navegadores envolvem o texto dependendo do largura do contêiner de texto e a largura da tela para que possamos ver todo o texto sem ter que rolar muito para os lados (só para baixo).
Invólucro é algo que os navegadores fazem considerando vários fatores, como a linguagem do texto ou a colocação de pontuação e espaços; não apenas empurre para baixo o que não cabe na caixa definida para o conteúdo do texto.
Além de embalar, os navegadores também cuide dos espaços; eles mesclam vários espaços consecutivos no código-fonte em um único espaço na página renderizada e também registram quebras de linha forçadas antes de começar a trabalhar na quebra automática.
Quando alterar a quebra de texto padrão
Isso é tudo ótimo e muito apreciado. Mas, podemos facilmente acabar em circunstâncias em que o comportamento padrão do navegador não é o que estamos procurando. Pode ser uma manchete que não deve ser embrulhado ou uma palavra em um parágrafo que melhor ser quebrado do que descer uma linha, deixando um espaço vazio de aparência estranha no final da linha.
Também pode acontecer que nós apenas desesperadamente precisa desses espaços preservados em nosso texto, no entanto, o navegador continua a combiná-los em um, forçando-nos a adicionar múltiplos no código-fonte.
As preferências de encapsulamento também podem mudar com a linguagem e finalidade do texto. Um artigo de notícias em mandarim e um poema em francês não necessariamente precisam ser embrulhados da mesma maneira.
Há um bom número de propriedades CSS (e elementos HTML!) Que podem controlar o envolvimento e os pontos de interrupção e também definir como os espaços e as quebras de linha são processados antes de envolver.
Oportunidades de envolvimento suave e quebra suave
Os navegadores decidem onde colocar um texto transbordante dependendo dos limites de palavras, hífens, sílabas, pontuações, espaços e mais. Esses lugares são todos chamados oportunidades de envoltório macio e quando o navegador quebra o texto em um desses lugares, a quebra é chamada de quebra de embalagem macia.
A maneira mais simples de forçar uma pausa extra pode ser feito usando o bom e velho
Espaço em branco
Se você estiver familiarizado com o espaço branco Propriedade CSS Aposto que você veio a conhecê-lo da mesma forma que muitos outros; enquanto procurava por uma maneira de impedir a embalagem de texto. o nowrap valor de espaço branco faz exatamente isso.
No entanto, o espaço branco a propriedade é mais do que simplesmente envolver. Primeiro de tudo, o que é espaço em branco? É um conjunto de caracteres do espaço. Cada espaço no conjunto varia de um ao outro de comprimento, direção ou ambos.
Um típico caráter único espaço horizontal é o que adicionamos pressionando a tecla de barra de espaço. Tecla Tab também adiciona um espaço semelhante, mas um com maior comprimento. Tecla Enter adiciona um espaço vertical para iniciar uma nova linha e em HTML adiciona um espaço único inquebrável para páginas da web. Assim, existem muitos tipos de espaços que constituem “espaço em branco”.
Como mencionei no começo, navegadores recolher vários espaços (horizontal e vertical) na fonte em um único espaço. Eles também considere estes caracteres de espaço para oportunidades de encapsulamento (lugares onde um texto pode ser embrulhado) quando é necessário envolver.
E são precisamente essas ações do navegador que podemos controlar espaço branco. Note que o espaço branco propriedade não afeta todos os tipos de espaço, apenas os mais frequentes como o espaço único horizontal regular, o espaço de tabulação e os feeds de linha.
Abaixo, você pode ver uma captura de tela de um texto de amostra envolto pelo navegador para caber dentro de seu contêiner. O estouro ocorre na parte inferior do contêiner e o texto transbordado é colorido de forma diferente. Você notará o colapso dos espaços consecutivos no código.
UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Ola¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá.
.textContainer width: 500px; altura: 320px;
Depois de aplicar espaço branco: nowrap; regra, o encapsulamento do texto muda da seguinte maneira:
.textContainer / *… * / white-space: nowrap;
o pré valor de espaço branco preserva todos os espaços em branco e impede a embalagem do texto:
.textContainer / *… * / white-space: pre;
o pre-wrap valor de espaço branco preserva todos os espaços em branco e envolve o texto:
.textContainer / *… * / white-space: pre-wrap;
finalmente, o pre-line valor de espaço branco preserva os espaços em branco verticais como novas linhas e envolve o texto:
.textContainer / *… * / white-space: pré-linha;
Quebras de palavra
Outra importante propriedade CSS que você deve saber para controlar o texto é quebra de palavras. Você pode ver em todas as imagens acima que o navegador embrulhou o texto antes da palavra “Olá” do lado direito, além do qual o texto transbordou. O navegador não quebrou a palavra.
No entanto, se você tem que permitir a quebra de letras em uma palavra de modo que o texto ficaria mesmo no lado direito você precisa usar o quebre tudo valor para o quebra de palavras propriedade:
.textContainer / *… * / word-break: break-all;
o quebra de palavras propriedade tem um terceiro valor além quebre tudo e normal (pertencente à quebra de linha padrão). o mantenha tudo valor não permite a quebra de palavras.
Você pode não conseguir ver o efeito de mantenha tudo em inglês. Mas, em idiomas onde letras em uma palavra são unidades significativas por conta própria, o navegador pode quebrar as palavras ao se envolver, e isso pode ser evitado usando mantenha tudo.
Por exemplo, o letras em palavras coreanas, inicialmente quebrado por embrulho, são mantidos juntos quando o espaço-branco: manter-tudo; regra é especificada.
UMA¬??¸UMAªUMA³?? Ã¥UMA¼ Ã-¥à ?? Ã? à ?? à ??¬«« ?? ?? ?? ?? ??¬UMA½?? à à à à à áUMA?? -??  ?? ?? ??¬--¬??  ??¬??¤. UMA¬10-?? UMA¬«« ?? ?? ?? ?? ??¬UMA½?? à «?? ?? UMAªUMAµÃ-ì? -??  ?? ?? ??¬??  ??ª? 1997à «Â ... 3 ½¬??? 10¡¬??¼Ã «Â¶12 12 ì??¼UMAªUMA¹?? ìUMA§UMA?? Ã… Ã… ì??¼UMA¬??? à «Â§?? ì??¸UMA¬UMA¦?? ì-?? ??¬??? UMA¬-´Ã «Â¦UMA½Ã?  ?? Ã? Ã?¤. UMA¬UMA§?? êUMA¸UMA?? à "Ã" à ¢ â¡?? à ?? ?? ?? ??¬--¬??  ??¬??¤. UMA¬??´ -??  ?? ?? ??¬??  ??¬-?? ??¬«Ã à à ?? ?? ?? UMA¬Â ...ªUMA³UMA?? UMA¬«Ã ° ?? ?? ??¬??? UMA¬Ã ìUMA¸UMAª° à à äUMA¬??´ Ã?¨UMAªÂ » à «ÂªUMA¨UMA¬-¬ Ã?¤UMA¬??  ??ªUMA³UMA¼ UMAª°  ??¬??? à «Â¶?? ì??¼Ã «Â¥UMA¼ Ã?¤Ã?  £¹Ã?  ?? Ã? Ã?¤.
.textContainer / *… * / word-break: manter tudo;
Esta propriedade pode suportar outro valor chamado quebra-palavra no futuro. Você vai ver como quebra-palavra funciona depois, no “Envoltório de estouro” seção deste artigo.
Oportunidades de quebra de palavras
Os desenvolvedores também podem adicionar oportunidades de quebra automática dentro das palavras, usando o
UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Hello â??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá. UMA¢??? Olá.
.textContainer / *… * / white-space: pre-wrap;
Sem
Hífens
o hífens Propriedade CSS é Outra maneira de controlar intervalos entre letras Em um mundo. Temos um artigo separado sobre hifenização de CSS, se você estiver interessado. Em suma, a propriedade permite que você criar oportunidades de embrulho por meio de hifenização.
Está auto valor solicita o navegador para automaticamente hifenizar e quebrar palavras quando necessário enquanto embrulho. o manual valor força os navegadores a embrulhar (se necessário) em oportunidades de hifenização adicionadas por nós, como o hífen (‐) ou (hífen suave). E se Nenhum foi dado como valor haveria sem envolvimento feito perto de hífens.
bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse
.textContainer / *… * / -webkit-hyphens: auto; -ms-hífens: auto; hífens: auto;
Envoltório de estouro
o overflow-wrap Controles de propriedade CSS se um navegador pode quebrar palavras (ou espaços preservados, suporte para o qual pode acontecer no futuro próximo) no estouro. Quando o quebra-palavra valor é dado para overflow-wrap, a palavra será quebrado em caso não são encontradas outras oportunidades de capa macia na linha.
Observe que overflow-wrap também é conhecido como quebra de linha (são aliases).
bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse
.textContainer / *… * / overflow-wrap: quebra de palavra;
Sem espaço entre as letras no código HTML acima (ou seja, sem oportunidades de agrupamento), o texto não foi empacotado no início e foi preservado como uma única palavra.
No entanto, quando a permissão foi dada para embrulhar o texto quebrando palavras (ou seja, o quebra-palavra valor foi dado a overflow-wrap), a envolvendo aconteceu quebrando a cadeia inteira onde quer que fosse necessário.
