css overflow - tylko 1 linia tekstu

137

Mam divz następującym stylem css:

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

Kiedy wstawiam do divniego długi wiersz tekstu , przechodzi on do nowego wiersza i wyświetla cały tekst. Chcę mieć tylko jeden wiersz tekstu, który nie będzie łamany. Gdy tekst jest długi, chcę, aby przepełniony tekst zniknął.

Myślałem o ustawieniu wysokości, ale wydaje mi się, że to źle.

Może jak dodam wysokość taką samą jak czcionka to powinna działać i nie sprawiać problemów w różnych przeglądarkach?

Jak mogę to zrobić?

html css overflow

— homerun
źródło

Czy możesz zademonstrować swój problem na jsFiddle ?

— Harry Joy,

369

Jeśli chcesz ograniczyć to do jednej linii, użyj white-space: nowrap;na div.

— Septnuits
źródło

Ale wtedy nie pokazuje wielokropka, jeśli tekst wykracza poza określony wymiar. stackoverflow.com/questions/26342411/…

— SearchForKnowledge

Działa, świetnie. Ale potrzebuję, ...jeśli jest więcej znaków do pokazania, ponieważ długość linii jest długa i wychodzi poza zapisany div.

— Moshii

Działa to dziwnie, jeśli ukryty tekst zawiera hiperłącza. Gdybym miał przewijać stronę, spowodowałoby to, że link w ukrytym tekście przewinął się na ekran, kiedy powinien być ukryty.

— Eric

Dzięki, potrzebowałem tego do mojej witryny Wordpress.

— Marcel Kraan

77

Jeśli chcesz zaznaczyć, że w tym elemencie div jest jeszcze więcej dostępnych treści, prawdopodobnie zechcesz pokazać „wielokropek”:

text-overflow: ellipsis;

Powinno to być dodatkiem do white-space: nowrap;sugerowanych przez Septnuits.

Upewnij się również, że sprawdziłeś ten wątek, aby obsłużyć to w przeglądarce Firefox.

— Mouli
źródło

48

Wierzę, że trzeba użyć text-overflow: ellipsis;z overflow: hidden;i white-space: nowrap;aby to działało

— Francisco Costa

caniuse.com/#feat=text-overflow aka. tak, możesz. Rozważ umieszczenie całej treści w atrybucie title, aby użytkownik nadal miał do niej dostęp.

— DanMan,

mój pokazuje tylko w jednej linii i nie wypełnia DIV przed pokazaniem wielokropka ... stackoverflow.com/questions/26342411/… ( jsfiddle.net/ofrj55j4/20 )

— SearchForKnowledge

47

Możesz użyć tego kodu CSS:

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

Właściwość text-overflow w CSS radzi sobie z sytuacjami, w których tekst jest przycinany, gdy przepełnia pole elementu. Można go przyciąć (tj. Odciąć, ukryć), wyświetlić wielokropek („…”, wartość zakresu Unicode U + 2026).

Należy zauważyć, że przepełnienie tekstu występuje tylko wtedy, gdy właściwość przepełnienia kontenera ma wartość hidden , scroll lub auto i white-space: nowrap; .

Przepełnienie tekstu może się zdarzyć tylko w przypadku elementów blokowych lub wbudowanych , ponieważ element musi mieć szerokość, aby został przepełniony. Przepełnienie następuje w kierunku określonym przez właściwość kierunku lub powiązane atrybuty.

— Gaurav Tripathi
źródło

Dla mnie jest to jeszcze doskonalsze. Dzięki

— Marcel Kraan

7

najlepszy kod dla UX i UI to

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

— Omid Ahmadyani
źródło

2

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

Zdefiniuj również szerokość, aby ustawić przepełnienie w jednej linii

— Jaydeep Kataria
źródło

0

jeśli dodasz, jeśli masz długi tekst, możesz użyć poniższego kodu CSS;

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

sprawia, że cały tekst linii jest widoczny.

— shafii muhudi
źródło

-2

Miałem ten sam problem i rozwiązałem go za pomocą:

display: inline-block;

na dany divtemat.

— Dekcolnu
źródło