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,

Odpowiedzi:

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