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,

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