Wrap Overflow CSS
Exemplo 01: envoltório normal
Em nosso primeiro exemplo, discutiremos o uso de envoltório normal com diferentes estilos de escrita. Então, estamos usando o código do Visual Studio para criar um novo arquivo HTML chamado “Teste.html ”e inicie o script html nele. O código HTML foi iniciado com a tag html principal seguida pela cabeça principal e tags do corpo. Dentro da etiqueta corporal, usamos os dois primeiros títulos de tamanhos diferentes. O cabeçalho 1 é o maior enquanto o rumo 2 é o segundo maior que mostra que isso seria um envoltório normal.
Após esse título, usamos a tag "Div" para criar uma nova seção na página principal da HTML. Esta tag "div" foi especificada com a classe "D1" para ser diferenciada no estilo. Adicionamos uma linha de texto ou parágrafo para envolvê -lo em um estilo de embrulho normal. Este texto é simples e não contém palavras longas nele. Após esta tag "div", usamos o segundo título desta página HTML para exibir que o próximo texto div também estará contendo um envoltório normal. Em seguida, temos uma nova tag "div" especificada pela classe "D2" para diferenciação em estilo.
Esta seção "div" contém um texto ou parágrafo longo, juntamente com uma palavra longa nela para que possamos ver como uma propriedade normal de transbordamento reage e estilizá-la. Após esta seção, o corpo foi concluído e a etiqueta corporal será fechada junto com a tag "html". Dentro da tag "Head" deste código HTML, temos uma tag de estilo para estilizar a página HTML. A palavra -chave “div” foi usada para estilizar as seções “div” a 100 pixels com a borda de 3 pixels de cor “azul”. A largura e a propriedade de fronteira foram usadas aqui para esse fim. Depois disso, as duas seções da DIV foram denominadas separadamente com o uso de sua classe. Nós embrulhamos os dois no embrulho normal usando a propriedade "transbordamento de transbordamento". O estilo foi concluído. Então, o estilo e a etiqueta da cabeça estão fechados aqui. Nosso script HTML foi concluído e está pronto para uso. Assim, salvamos e tentamos executá -lo no código VS.
Temos usado o menu "Run" do código do Visual Studio, seguido pela opção "Start Debugging". Ele pediu para selecionar o Chrome do navegador da lista. Nós o executamos e temos a saída mostrada do sol para duas seções "div" contendo um envoltório normal em seu texto. A primeira seção "div" foi exibir seu texto em um formato classificado e normal, porque não contém uma palavra muito longa que não pode ser montada na largura de 100 pixels.
Por outro lado, a segunda caixa “div” contém uma palavra muito longa em seu texto. Portanto, a saída está mostrando que a palavra cruzou a borda da caixa “div” de 100 pixels como uso de envoltório normal. Isso ocorre porque o envoltório normal não quebra a palavra para encaixá -lo na seção "div".
Exemplo 02: Wrap-Word Wrap
Neste exemplo, discutiremos o uso de embrulho de palavras quebradiça em comparação com o envoltório normal. Então, usamos o mesmo código HTML na ferramenta de código do Visual Studio, mas com poucas atualizações. Então, estaremos iniciando sua explicação da tag "corporal". Atualizamos os dados de texto "div" com a frase longa contendo uma palavra longa nele. O título 1 seria declarado como um envoltório normal, enquanto o outro título do tamanho 1 é declarado como um envoltório de "palavra quebranteado".
Atualizamos o texto da seção “div” para as duas seções “div” separadamente. O corpo agora está completo e estaremos olhando para o estilo. A mesma largura e propriedade de fronteira foram utilizadas para seções "div" e suas classes foram usadas para seu estilo separado. Estamos especificando um envoltório normal para a primeira seção "div" enquanto o embrulho "quebra-palavras" para a segunda seção "div". Nós salvamos este código.
Depois de executar este código atualizado no navegador, temos a saída mostrada de abastecimento. O primeiro texto da seção “div” está cruzando sua borda sem quebrar uma palavra enquanto a outra seção “div” o texto tem uma palavra longa que foi quebrada e movida para a próxima linha para caber no painel “div”. Isso é feito pelo uso de embrulho de palavra quebra.
Exemplo 03: em qualquer lugar envolvente
Neste exemplo, explicaremos o uso da propriedade Overflow-Wrap para aplicar o embrulho "em qualquer lugar" em nossos "dados" e compará-lo com o envoltório da palavra quebra. Então, dentro da etiqueta corporal do nosso código HTML, atualizamos seus títulos. O primeiro cabeçalho do tamanho 1 foi declarado como embrulho de palavra de quebra, enquanto o segundo título do mesmo tamanho é declarado como "em qualquer lugar". Ambas as tags "div" contêm o texto da frase longa atualizada contendo pelo menos 1 palavra longa. Ambas as frases nas tags "div" são atualizadas separadamente para palavra de break e em qualquer lugar separadamente.
Dentro da etiqueta de estilo, estamos novamente usando a largura de 100 pixels para ambas. Depois disso, usamos as classes de ambas as tags separadamente para estilizá -las de acordo: D1 e D2. A propriedade Overflow-Wrap foi usada para ambos "div" separadamente para estilizar a primeira div com "Wrap-Word" e o segundo "div" com o embrulho "em qualquer lugar". Vamos salvar e executar este código agora.
A saída deste código atualizada está mostrando não uma pequena alteração no estilo das duas seções "div". Palavra de descanso e em qualquer lugar é o mesmo.
Conclusão
Trata-se do estilo de diferentes elementos de um arquivo HTML com a propriedade "Overflow-Wrap" para evitar o transbordamento de diferentes textos de string de qualquer tipo de elemento nas páginas da web html. Vimos três exemplos HTML muito simples, porém úteis. Junto com isso, também cobrimos suas comparações.