Uma folha de estilo em cascata (CSS) oferece uma propriedade para exibir todos os itens HTML sem interrupção, ou você pode dizer que todo o conteúdo HTML é exibido em uma única linha. HTML e CSS contribuem para realizar esse fenômeno na página da web. A vantagem básica de fazer isso é que o conteúdo HTML terá menos espaço quando forem exibidos. Também deixa o conteúdo alinhado.

Não há nenhum recurso interno em CSS como os outros efeitos, por exemplo, a decoração de texto, tipo de estilo de lista, etc. Mas precisamos aplicar esse efeito de interrupção sem linha usando uma propriedade de exibição que é avaliada como uma propriedade em linha em linha.

Para implementar o efeito da propriedade do CSS No-line, você precisa conhecer o básico do HTML e CSS. Usaremos um editor de texto para o código e um navegador para implementar o código no editor. Vamos elaborar a propriedade CSS do Block Inline e seus efeitos no fenômeno "sem quebra de linha".

Propriedade do CSS Block Inline

Esta propriedade é usada para exibir um item no contêiner em linha em linha. Nesta abordagem, o bloco de elementos é convertido no elemento embutido. Ao fazer isso, há a prevenção do intervalo de linha. A sintaxe da propriedade em linha em linha é exibida no seguinte:

Item
Exibição: bloco embutido;

Vamos implementar esta propriedade de duas maneiras: através da lista e a div.

Exemplo 1: Nenhuma quebra de linha nas listas

No primeiro exemplo, aplicaremos o conceito de interrupção sem linha na lista. Uma lista é um conteúdo HTML em que o texto é representado verticalmente junto com as balas, a lista é ordenada ou não ordenada. Quando falamos sobre listas, sempre criamos a visão de ter cada item da lista em uma linha separada com uma quebra de linha. Mas às vezes, de acordo com o cenário, queremos exibir os itens da lista sem balas em uma única linha. Isso é feito exibindo os itens da lista usando o CSS com a propriedade "sem quebra de linha". Vamos iniciar o código HTML com a seção corporal.

Usamos dois títulos do texto através das tags de título -

e

. Depois disso, a lista não ordenada é criada com 5 itens em cada linha.

• Rede de computadores


• ..

A mesma sintaxe é seguida para os 5 itens a serem inseridos em cada linha.

Depois disso, o A tag fecha a lista e também feche o resto das tags também. Agora, considere as tags de estilo, pois precisamos aplicar a propriedade Display na lista para que cada item da lista seja exibido em uma única linha.

Li
Exibição: bloco embutido;

Usamos a tag "Li" diretamente no CSS para aplicar o efeito em linha em linha em todos os itens da lista e impedir que eles exibam em uma linha separada. Além disso, aplicamos a cor da fonte aos dois títulos. Este é um estilo adicional e não é obrigatório para usar.

Para o estilo do corpo, usamos a cor do fundo e a cor da fonte coletivamente para adicionar um estilo à página da web para torná -la estética aos usuários. Outro recurso importante que é usado para aplicar a propriedade de exibição é mencionar a largura do corpo HTML para exibir todo o conteúdo HTML em uma única linha.

Corpo
Largura: 60%;

Salve o código no arquivo do editor de texto com a extensão HTML para torná -lo um ícone do navegador que descreve que é uma página da web. Execute -o no navegador. A página da web esperada tem uma lista de todos os itens em uma notação vertical se não houver propriedade em linha embutida.

Mas, como resultado dessa propriedade CSS, vemos que todos os itens da lista são exibidos em uma única linha horizontal sem balas. Não parece mais uma lista. Mas parece um parágrafo simples com os espaços padrão entre as palavras.

Exemplo 2: Nenhuma quebra de linha na div

Assim como listas, quando a lista é convertida em um parágrafo, somos capazes de aplicar o efeito de exibição em qualquer outro conteúdo HTML. Então, escolhemos uma div. Uma div é o recipiente que contém o outro conteúdo HTML dentro dele. Primeiro, considere uma tag div em que não aplicamos nenhum efeito CSS de "sem quebra de linha". Mas a div é fornecida com seus estilos básicos, como preenchimento e cor, para exibir a existência de ambos os divs na página da web.

Div one

O mesmo vale para o div dois.

Salve o código e execute -o no navegador. Você verá que dois divs são exibidos verticalmente com as especificações que aplicamos como um CSS em linha dentro das tags. Esses divs são exibidos sem qualquer quebra entre eles. Como visto na saída, ambas as divs estão anexadas.

Sempre que uma div ou uma tabela é usada no html, ambos estavam um após o outro em uma direção vertical como representamos. Isso ocorre porque o HTML gera o espaçamento automático seguindo o valor do preenchimento aplicado pelo usuário para mantê -los em uma única linha. Usando o fenômeno "sem quebra de linha", passamos por algumas mudanças no código.

Primeiro, aplicamos a propriedade Display com a propriedade em linha em linha a ambos os divs no CSS.

Div
Exibição: bloco embutido;

Além disso, precisamos reduzir a largura do corpo do HTML para que ambos os divs possam se ajustar ao tamanho dado do corpo.

Corpo
Largura: 30%;

Após a execução, você verá que os dois divs que declaramos usaram a propriedade CSS "sem quebra de linha" da exibição.

Maneiras adicionais:

Algumas informações adicionais sobre a propriedade da “sem quebra de linha” são acompanhadas pelas tags HTML sem o uso das tags CSS separadamente.

Uma maneira é usar a string  . Usar essa string entre duas cordas causa um espaço, fazendo com que permaneçam na mesma linha em vez de usar um
tag que leva para a seguinte linha. O operador e (&) é usado para fins de ligação.

123 e#160

Outra maneira de uma lacuna entre duas cordas é que o HTML usa um recurso interno "NBSP" ou o "espaço sem quebra". Usamos o NBSP entre dois números. Os resultados terão um espaço.

456

Agora, após a execução, você verá o espaço entre esses três números sem usar a quebra de linha.

Conclusão

O artigo "sem quebra de linha" do CSS explica o uso das propriedades do CSS e HTML, exceto o efeito de quebra que é aplicado através da tag de interrupção HTML
. No início, fizemos uma introdução simples sobre HTML e CSS. A propriedade que é responsável principalmente pelo efeito "sem quebra de linha" é explicada como a propriedade de exibição em bloqueio em linha. Explicamos o uso de exibição em bloqueio em linha nas listas HTML e os contêineres da DIV através de exemplos. Além disso, algumas informações adicionais sobre este tópico também são adicionadas.