Como evitar quebras de linha em itens de lista usando CSS

No HTML, os usuários podem criar listas em ordem, bem como formas não ordenadas. Por padrão, há quebras de linha entre elementos em uma lista. No entanto, às vezes, você pode mostrar os dados da lista em uma linha, como exibido na barra de navegação. Para esse fim, os desenvolvedores são necessários para evitar quebras de linha entre os itens da lista.

Este artigo demonstrará:

• • Como fazer/criar uma lista em html?
  • Como evitar quebras de linha em itens de lista usando CSS?

Como fazer/criar uma lista em html?

Para criar uma lista no HTML, experimente as instruções fornecidas.

Etapa 1: Crie um contêiner "div"

Inicialmente, crie um contêiner de div com a ajuda do “" marcação. Além disso, adicione um “aula”Atribua e aloque um nome ao atributo de classe de acordo com sua preferência.

Etapa 2: Faça uma lista

Em seguida, utilize o “

”Tag para criar uma lista não ordenada e inserir o“
• ”Tag para adicionar dados à lista:

  
  

  
  
  • Chá
  
  
  • Café
  
  
  • Leite
  
  
  • suco
  
  
  • Bebida gelada
  
  
  • hortelã
  
  

  
  

  
  Como resultado, a lista foi criada com sucesso:

  Como evitar quebras de linha em itens de lista usando CSS?

  Se você deseja impedir/remover quebras de linha dos itens de lista usando CSS, aplique o “mostrar”Propriedade com o valor“Block inline”Isso remove quebras de linha em itens de lista.

  Para uma demonstração prática, confira as etapas fornecidas.

  Etapa 1: estilo “Div” contêiner

  Para estilizar o contêiner, primeiro, acesse a classe utilizando o nome da classe com um seletor de pontos como “.Principal-Div”. Em seguida, aplique as propriedades CSS abaixo:

  .main-div
  borda: 3px azul sólido;
  margem: 20px 100px;
  Background-Color: RGB (100, 193, 236);
  

  
  Aqui:

  • • ““fronteira”É utilizado para definir o limite em torno de um elemento.
    • ““margem”É usado para especificar o espaço fora da fronteira.
    • ““cor de fundo”Aloca uma cor na parte traseira do elemento.

  Saída

  
  Etapa 2: Evite a quebra de linha na lista

  Acesse a lista com a ajuda de “

• ”E aplique as seguintes propriedades CSS:

  li
  Exibição: bloco embutido;
  estouro: oculto;
  Espaço branco: Nowrap;
  Fluxo de text-overflow: elipsis;
  

  
  De acordo com o snippet de código fornecido:

  • • ““mostrar”O valor da propriedade é definido como“Block inline”Para prevenir quebras de linha.
    • ““transbordar”É utilizado para especificar o que deve acontecer se o conteúdo derramar da caixa de um elemento. Esta propriedade determina se deve pegar o texto ou adicionar barras de rolagem quando o conteúdo desse elemento é longo para definir em uma área específica.
    • ““espaço branco”É utilizado para controlar o espaço branco e as quebras de linha dentro do texto são tratadas.
    • ““Text-overflow”É usado para lidar com as circunstâncias quando o texto é cortado e transborda da caixa do elemento.

  Saída

  
  Você aprendeu sobre o método para prevenir quebras de linha nos itens de lista, utilizando as propriedades do CSS.

  Conclusão

  Para impedir a quebra da linha em itens de lista usando CSS, primeiro, crie uma lista com a ajuda do “

  ”Tag e adicione dados usando o“
  • " marcação. Em seguida, acesse a lista e aplique o “mostrar" propriedade. Em seguida, defina o valor “Block inline”Isso remove quebras de linha em itens de lista. Este artigo ensinou o método mais fácil para impedir a quebra de linha em itens de lista usando CSS.