Como evitar quebras de linha nos itens da lista usando CSS


513

Estou tentando colocar um link chamado Enviar currículo em um menu usando uma litag. Por causa do espaço em branco entre as duas palavras, ele divide em duas linhas. Como evitar esse empacotamento com CSS?

Respostas:


969

Use white-space: nowrap;[1] [2] ou dê mais espaço a esse link, configurando lia largura para valores maiores.


[1] § 3. Espaço em branco e quebra automática: a propriedade de espaço em branco - Nível 3 do módulo de texto CSS do W3
[2] espaço em branco - CSS: folhas de estilo em cascata | MDN


41
Você deve consultar o W3C em vez do site temido e frequentemente incorreto do w3schools. w3.org/TR/css3-text/#white-space0 #
Sebastien Martin

53
Ou apenas referência da Mozilla Developer Network developer.mozilla.org/en-US/docs/CSS/CSS_Reference
Chris Esplin

4
Eu impedi a quebra de linha nos itens li usando display: inline;. Talvez isso também ajude outras pessoas com problemas semelhantes.

É importante ter cuidado com a exibição: em linha, pois pode ter efeitos colaterais. espaço em branco: nowrap; tem apenas um efeito.
Crispen Smith

Nesse caso, ocorre excesso de texto. como evitar isso?

147

Você pode adicionar este pequeno trecho de código para adicionar um "…" agradável ao final da linha se o conteúdo for grande demais para caber em uma linha:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

Eu estava procurando por uma solução de fixação de texto, mas vou me ater a essa solução #
JorgeGarza 27/16/16

33

Se você deseja conseguir isso seletivamente (ou seja: apenas para esse link específico), pode usar um espaço sem quebra em vez de um espaço normal:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

edit: Eu entendo que isso é HTML, não CSS, conforme solicitado pelo OP, mas alguns podem achar útil…


14

display: bloco embutido; impedirá a quebra entre as palavras em um item da lista

 li {
    display: inline-block;
 }

1
Se eu clicar para o jsFiddle e ajustar a largura da saída, os itens de lista individuais quebrar entre a "lista" palavra eo número, que é exatamente o que o OP não quer ...
GentlePurpleRain

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.