Como impedir que o texto ocupe mais de uma linha?

332

Existe uma quebra de linha ou qualquer outro atributo que impede a quebra de texto? Eu tenho uma altura e overflow:hidden, e o texto ainda quebra.

Precisa trabalhar em todos os navegadores, antes do CSS3.

— Isherwood
fonte

632

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

Expandir snippet

Nota: isso funciona apenas em elementos de bloco. Se você precisar fazer isso nas células da tabela (por exemplo), precisará colocar uma div dentro da célula da tabela, pois as células da tabela exibem a célula da tabela não bloqueada.

A partir do CSS3, isso também é suportado pelas células da tabela.

— cleto
fonte

12

espaço em branco! É isso que eu estou procurando ... 1.000 obrigado ... isso é impossível para o google!

2

Há também um atributo proprietário, ou seja, chamado quebra de linha (IIRC) ... IE estúpido.

— 23410 garrow

21

Considere também "excesso de texto: reticências;" Ele adiciona a ... no final do seu texto se ele vai para fora dos limites da largura do recipiente

— de Drew Landgrave

1

Eu acho que o comentário "isso só funciona em elementos de bloco" está certo. Se você tentar isso em uma âncora, parágrafo, cabeçalho etc., isso não funcionará. Você precisa fazer algo parecido comp.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Alex Angelico

Cuidado com o excesso de cobertura; isso significa negócios.

— David A. Gray

57

Você pode usar CSS white-space Propertypara conseguir isso.

white-space: nowrap

— Robert C. Barth
fonte

36

Usar reticências adicionará ... finalmente.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— Vivek
fonte

4

Às vezes, usar em  vez de espaços funcionará. Claramente, ele tem desvantagens.

— grossvogel
fonte

Infelizmente, não posso fazê-lo nesta circunstância

2

Apenas para ser claro, isso funciona muito bem com parágrafos e cabeçalhos, etc. Você só precisa especificar display: block.

Por exemplo:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(perdoe os estilos embutidos)

— Duncan Jones
fonte