estouro de css - apenas 1 linha de texto

134

Eu tenho divcom o seguinte estilo css:

width:335px; float:left; overflow:hidden; padding-left:5px;

Quando insiro divnela uma longa linha de texto, ela passa para uma nova linha e exibe todo o texto. O que eu quero é ter apenas uma linha de texto que não quebre. Quando o texto for longo, quero que esse texto transbordante desapareça.

Eu estava pensando em definir a altura, mas parece estar errado.

Talvez se eu adicionar uma altura igual à da fonte, ela funcione e não cause problemas em navegadores diferentes?

Como eu posso fazer isso?

html css overflow para fora
fonte
Você pode demonstrar seu problema no jsFiddle ?
Harry Joy,

Respostas:

352

Se você deseja restringi-lo a uma linha, use white-space: nowrap;na div.

Septnuits
fonte
Mas não mostra as reticências se o texto ultrapassar a dimensão especificada. stackoverflow.com/questions/26342411/…
SearchForKnowledge
Isso funciona, ótimo. Mas eu preciso ...se houver mais caracteres para mostrar, porque quando o comprimento da linha é longo e sai da div escrita.
Moshii 29/09/16
Isso é estranho se o texto oculto contiver hiperlinks. Se eu folheasse a página, faria com que o link no texto oculto rolasse para a tela, quando deveria estar oculta.
Eric
76

Se você deseja indicar que ainda há mais conteúdo disponível nessa div, é provável que você queira mostrar as "reticências":

text-overflow: ellipsis;

Isso deve ser um acréscimo ao white-space: nowrap;sugerido por Septnuits.

Além disso, verifique este tópico para lidar com isso no Firefox.

Mouli
fonte
47
Eu acredito que você deve usar text-overflow: ellipsis;com overflow: hidden;e white-space: nowrap;fazê-lo funcionar
Francisco Costa
caniuse.com/#feat=text-overflow aka. sim você pode. Considere colocar todo o conteúdo no atributo title, para que o usuário ainda tenha acesso a ele.
DanMan
mina apenas shows em uma linha e não preencher o DIV antes de mostrar as reticências ... stackoverflow.com/questions/26342411/... ( jsfiddle.net/ofrj55j4/20 )
SearchForKnowledge
43

Você pode usar este código css:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

A propriedade overflow de texto no CSS lida com situações em que o texto é cortado quando transborda a caixa do elemento. Pode ser cortada (ou seja, cortada, oculta), exibir reticências ('…', valor do intervalo Unicode U + 2026).

Observe que o excesso de texto ocorre apenas quando a propriedade de excesso do contêiner tem o valor oculto , rolagem ou automático e espaço em branco: nowrap; .

O excesso de texto só pode ocorrer em elementos de nível de bloco ou bloco embutido , porque o elemento precisa ter uma largura para ser excedido. O estouro acontece na direção, conforme determinado pela propriedade direction ou atributos relacionados.

Gaurav Tripathi
fonte
6

o melhor código para UX e UI é

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
Omid Ahmadyani
fonte
0

se for o caso, por favor, se você tiver um texto longo, pode usar este código css abaixo;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

torne o texto inteiro visível.

shafii muhudi
fonte
0 
width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

Defina a largura também para definir o estouro em uma linha

Jaydeep Kataria
fonte
-2

Eu tive o mesmo problema e o resolvi usando:

display: inline-block;

no divem questão.

Dekcolnu
fonte