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.

html css text word-wrap Isherwood
fonte

Respostas:

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 &nbsp;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