CSS Word Wrap
Neste tutorial, forneceremos orientações completas sobre esta propriedade "enrolar-se" e realizaremos exemplos em que usaremos a propriedade CSS "Word-Wrap".
Exemplo 1:
Vamos começar nosso código e executá -lo no código do Visual Studio. Começamos lançando um novo arquivo e depois selecionamos HTML como o idioma. Agora, tipo “!"E pressione" Enter.”Aqui você encontrará todas as tags básicas html. Como resultado, não teremos que adicionar manualmente todas essas tags. Depois de tudo isso, apenas inserimos o nome do arquivo CSS na tag "Link" na "cabeça". Colocamos dois títulos no corpo e criamos uma div na qual escrevemos uma palavra longa para usar a propriedade "Word-wrap" no CSS e mostraremos como funciona.
Estamos decorando o cabeçalho aplicando “cor” e configurando-o para o “vermelho” usando a propriedade “Decoração de texto” e usando a palavra-chave “sublinhado” para esta propriedade. Aplicamos estilo a este cabeçalho para torná -lo atraente. Também decoramos o segundo cabeçalho: "verde" como a "cor" e aplicamos a "decoração de texto" e o definimos como "sublinhado". Estamos definindo a "largura" do "div" como "150px" e criando uma "fronteira" ao seu redor. Esta borda é sobre "3px" em sua "largura" e é do tipo "sólido", "vermelho" na "cor".
Aqui, estamos aplicando a propriedade "Word-wrap" e configurando-a como "Normal", que também é o valor "padrão". Não vai quebrar a palavra longa. A palavra longa aparecerá como está escrita no código HTML. Ele atravessará a fronteira que criamos para a div e o texto longo permanece o mesmo, não quebrará esta palavra.
A saída mostra que a palavra longa parece a mesma que a escrevemos no arquivo html. Ele atravessa a fronteira e aparece em uma linha. A palavra longa não é quebrada aqui porque define a propriedade "Word-wrap" como "Normal", que é a mesma que o "padrão".
Exemplo # 2:
Estamos usando o mesmo código HTML e agora aplicaremos a palavra-chave "quebra-palavras" como o valor da propriedade "Word-Wrap" neste exemplo.
A “cor” para o cabeçalho 1 “H1”, estamos utilizando “Maroon” e utiliza a “descrição do texto” para sublinhar. Para "H2", utilizamos "roxo" como o "H2" "cor" e "sublinhe" também. A "largura" do contêiner "div" é "160px" e projete uma borda ao redor, utilizando a propriedade "Border". Definimos "3px" para a "largura" da fronteira da div, que é da forma "sólida" e "marrom" na cor. Aqui está a propriedade "Word-wrap" na qual usamos o valor "Break-Word". Este valor quebrará a palavra longa de acordo com o espaço especificado. Veremos a saída e saberemos como a palavra longa quebra, utilizando esta propriedade.
Observe como a palavra longa é quebrada e ajustada dentro do contêiner div. Esta palavra longa é quebrada nesta saída porque utilizamos o valor "quebra-palavras" para a propriedade "Word-wrap".
Exemplo # 3:
Temos dois títulos "H1" e "H2". Abaixo desses títulos, temos duas divs diferentes com o nome "A" e "B". Escrevemos o texto dentro de ambos os divs e colocamos uma palavra longa em cada div. Agora, estamos criando um arquivo CSS no qual utilizaremos a propriedade "Word-Wrap".
Usamos a propriedade "cor" e a definimos como "verde" para decorar o título, bem como a propriedade "decoração de texto" e a palavra-chave "sublinhado" para esta propriedade de "decoração de texto". Também usamos "laranja" como "cor" para o próximo título e implementamos "decoração de texto" com "sublinhado" como a configuração. Definimos a "largura" do "div" como "180px", que definirá essa largura para ambos os divs porque não mencionamos o nome de nenhum div aqui. Também utilizamos a propriedade "fronteira", que também se aplica a ambos os divs. A "largura" da fronteira para ambos os divs é "3px", "sólido" e "azul" está definido para a "cor" da borda.
Mencionamos o nome da primeira div, que é “div. A ”e então o atributo“ Word-wrap ”é aplicado. O valor é definido como "normal", que também é o valor "padrão". A palavra longa não está quebrada para esta div. A palavra longa será exibida exatamente como é digitada no código HTML. Agora, temos o segundo div, que é “div. B ”. Para isso, estamos utilizando a propriedade "Word-Wrap" e o valor "Break-word" é usado. A palavra longa será quebrada de acordo com o espaço fornecido com este valor. Ao alavancar esta propriedade e valor, poderemos ver como a palavra longa se divide na saída.
A palavra longa da primeira div não está quebrada porque usamos "normal" como o valor de "embrulhar palavras" para o "div. a". Mas na segunda div, você pode ver que a palavra longa também é ajustada no espaço especificado. Esta longa palavra que está presente dentro da segunda div está quebrada. Isso ocorre devido ao uso do valor de "palavra de quebra" da propriedade "Word-wrap".
Exemplo # 4:
Criamos títulos para este exemplo e colocamos dois parágrafos com os diferentes nomes de classe como "par" para o primeiro parágrafo e "par1" para o segundo parágrafo. Também colocamos uma palavra longa nos dois parágrafos e usaremos a propriedade "Word-Wrap" no CSS.
A "cor" da cabeçadeira é definida em forma de RGB. Seu valor é "RGB (112, 6, 6)", que é um tom "marrom". Também usamos a fonte "argelina" para "H1". Também definimos a “família da fonte” de “H2” como “Times New Roman”. A "cor" de H2 é "azul-violeta" e a modela como "itálico" para torná-lo atraente.
Agora, vem "par" que define o primeiro parágrafo. A "largura" que estamos definindo aqui é "200px" e definimos sua "cor de fundo" como "azul clara". Também queremos criar a fronteira para isso, por isso utilizamos "Border" e definimos como "2px Solid Black". O "preenchimento" que estamos descrevendo é "10px" e o tamanho do texto do parágrafo é "20px" para "par". Não usamos a propriedade "Word-wrap" para este parágrafo.
Depois disso, temos outro parágrafo com o nome "P1". Definimos a "largura" como "11em" e a "cor de fundo" como "azul claro". Também precisaremos de uma fronteira para isso, por isso estamos usando a "fronteira" e configurando -a para "2px Solid Black."O" preenchimento "de que estamos falando é" 10px ". Estamos utilizando a propriedade "Word-wrap" e definimos como "Break Word", que discutimos em nossos códigos anteriores e o tamanho do texto do parágrafo é "20px" para "PAR1".
Aqui, a longa palavra do primeiro parágrafo não está quebrada porque não usamos a propriedade "Word-Wrap" para isso, ela é definida como padrão. Mas usamos o "Word Wrap: Break-Word" para o segundo parágrafo, então a longa palavra do parágrafo é quebrada.
Conclusão:
O objetivo deste tutorial é ensiná-lo a usar a propriedade CSS "Word-Wrap". Neste tutorial, analisamos a propriedade "Word-Wrap" CSS e descrevemos o que é, como usá-la e como funciona. Explicamos que esta propriedade quebra a palavra longa e ajusta essa longa palavra no espaço especificado. Também mostramos exemplos de como usar esta propriedade "Word-wrap", bem como os resultados de todos os exemplos.