Evitando quebras de linha em itens de lista com CSS

Ao adicionar hiperlinks a itens de lista usando tags li, espaços em branco entre palavras podem fazer com que o link quebrar em várias linhas. CSS oferece soluções para resolver esse problema.

Solução 1: propriedade de espaço em branco

A propriedade de espaço em branco permite controlar como o espaço em branco é tratado dentro de um elemento . Ao definir white-space: nowrap; na tag li, você pode evitar que o link seja quebrado:

li {
  white-space: nowrap;
}

Solução 2: Aumentando a largura do item da lista

Se não quiser eliminar todos os espaços em branco, você pode aumentar a largura da tag li. Isso dá ao link mais espaço para caber em uma linha:

li {
  width: 200px;
}

Ambas as soluções evitam efetivamente que o link seja quebrado, mantendo a legibilidade da lista.