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?


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.


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.


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.


6

o melhor código para UX e UI é

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

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.


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

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


-2

Eu tive o mesmo problema e o resolvi usando:

display: inline-block;

no divem questão.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.