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?

html css word-wrap Rajasekar
fonte

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

n1313
fonte
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;
}
JimmyRare
fonte
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…

ptim
fonte
14

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

 li {
    display: inline-block;
 }
Nadeesh Peiris
fonte
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
4

O Bootstrap 4 tem uma classe chamada text-nowrap. É exatamente o que você precisa.

Yevgeniy Afanasyev
fonte
2
Eu preferiria evitar recomendar o uso do Bootstrap em 2019.
Broda Noel 6/19
2
@BrodaNoel Why?
Yevgeniy Afanasyev