z
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
„...” pojawi się na końcu linii, jeśli zostanie przepełniona. Zostanie to jednak pokazane tylko w jednym wierszu. Ale chciałbym, aby był wyświetlany w wielu liniach.
Może wyglądać następująco:
+--------------------+
|abcde feg hij dkjd|
|dsji jdia js ajid s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+
Odpowiedzi:
Istnieje również kilka wtyczek jquery, które rozwiązują ten problem, ale wiele nie obsługuje wielu wierszy tekstu. Następujące prace:
Istnieją również testy wydajności .
źródło
Włamałem się, dopóki nie udało mi się osiągnąć czegoś zbliżonego do tego. Ma kilka zastrzeżeń:
Powinienem również zauważyć, że tekst zostanie złamany na granicy słowa, a nie granicy znaku. Było to celowe (ponieważ uważam to za lepsze w przypadku dłuższych tekstów), ale ponieważ różni się od tego
text-overflow: ellipsis
, co robi, pomyślałem, że powinienem o tym wspomnieć.Jeśli możesz żyć z tymi zastrzeżeniami, HTML wygląda następująco:
I to jest odpowiedni CSS, na przykładzie pola o szerokości 150 pikseli z trzema liniami tekstu na białym tle. Zakłada się, że masz reset CSS lub podobny, który ustawia marginesy i wypełnienia na zero w razie potrzeby.
Wynik wygląda następująco:
Aby wyjaśnić, jak to działa, oto ten sam obraz, z wyjątkiem tego, że
.hidedots1
jest podświetlony na czerwono i.hidedots2
cyjan. Oto prostokąty, które ukrywają elipsę, gdy nie ma niewidocznego tekstu:Testowane w IE9, IE8 (emulowane), Chrome, Firefox, Safari i Opera. Nie działa w IE7.
źródło
your text
jest opatrywana<p>
tagów (jak powinny być), a następnie można użyć.ellipsify p:before
i.ellipsify p:after
wtedy oczywiście trzeba jest kod na elipsy, również mogą potrzebować , ponieważ nie może działać dla pustych elementów..ellipsify p:before{content:"\2026";}
\2026
content:" ";
+1
.Oto ostatni artykuł na temat sztuczek css, który omawia ten temat.
Niektóre rozwiązania w powyższym artykule (które nie są tutaj wymienione) są
1)
-webkit-line-clamp
i 2) Umieść element absolutnie pozycjonowany w prawym dolnym rogu z wygaszeniemObie metody zakładają następujące znaczniki:
z css
1) -webkit-line-clamp
zacisk liniowy FIDDLE (dla maksymalnie 3 linii)
2) znikną
Zanik FIDDLE
Rozwiązanie nr 3 - Kombinacja korzystająca z @supports
Możemy użyć @supports, aby zastosować zacisk linii webkit w przeglądarkach webkit i zastosować wygaszanie w innych przeglądarkach.
@ obsługuje zacisk liniowy z fadedle fadedle
CSS
źródło
Poniższy link zawiera czyste rozwiązanie HTML / CSS tego problemu.
Obsługa przeglądarki - jak stwierdzono w artykule:
http://www.mobify.com/dev/multiline-ellipsis-in-pure-css
css:
HTML:
skrzypce
(zmień rozmiar okna przeglądarki do testowania)
źródło
Chrome for Mac Version 48.0.2564.116
Po przejrzeniu specyfikacji W3 dotyczącej przepełnienia tekstu , nie sądzę, że jest to możliwe tylko przy użyciu CSS. Ellipsis jest nową właściwością, więc prawdopodobnie nie otrzymała jeszcze dużego użycia ani opinii.
Wydaje się jednak, że ten facet zadał podobne (lub identyczne) pytanie i ktoś był w stanie wymyślić fajne rozwiązanie jQuery. Możesz przetestować rozwiązanie tutaj: http://jsfiddle.net/MPkSF/
Jeśli javascript nie jest opcją, myślę, że możesz mieć pecha ...
źródło
Po prostu chcę dodać do tego pytania ze względu na kompletność.
źródło
-o-ellipsis-lastline
mogło zostać usunięte, gdy Opera przełączyła się na WebKit. Pozostawienie kuli do celów historycznych.Świetne pytanie ... Chciałbym, żeby była odpowiedź, ale jest to obecnie najbliższe rozwiązanie CSS. Brak elipsy, ale nadal całkiem użyteczna.
źródło
Znalazłem to rozwiązanie css (scss), które działa całkiem dobrze. W przeglądarkach webkit pokazuje elipsę, a w innych przeglądarkach po prostu obcina tekst. Co jest w porządku dla mojego zamierzonego zastosowania.
Przykład twórcy: http://codepen.io/martinwolf/pen/qlFdp
źródło
-webkit-line-clamp
obsługa przeglądarki caniuse.com/#search=-webkit-line-clampOto najbliższe rozwiązanie, jakie można uzyskać za pomocą tylko css.
HTML
CSS
Working Fiddle ( zmień rozmiar okna, aby sprawdzić )
Link do mojego bloga w celu wyjaśnienia
Zaktualizowano skrzypce
Mam nadzieję, że teraz jakiś ekspert css wiedziałby, jak to zrobić. :)
źródło
div::before
zamiast tegospan
? :)Tutaj jest wiele odpowiedzi, ale potrzebowałem takiej, która była:
Zastrzeżenie polega na tym, że nie zapewnia wielokropka dla przeglądarek, które nie obsługują
-webkit-line-clamp
reguły (obecnie IE, Edge, Firefox), ale używa gradientu, aby wyciszyć tekst.Możesz zobaczyć to w działaniu w tym CodePen, a także tutaj możesz zobaczyć wersję Javascript (bez jQuery).
źródło
Trochę za późno na tę imprezę, ale wymyśliłem, jak sądzę, wyjątkowe rozwiązanie. Zamiast próbować wstawić własną elipsę za pomocą sztuczek css lub js, pomyślałem, że spróbuję rzucić z ograniczeniem tylko jednej linii. Powielam więc tekst dla każdej „linii” i po prostu używam ujemnego wcięcia tekstu, aby upewnić się, że jeden wiersz zaczyna się tam, gdzie kończy się ostatni. SKRZYPCE
CSS:
HTML:
Więcej szczegółów w skrzypcach. Wystąpił problem z przepełnieniem przeglądarki, dla którego używam przerysowania JS i dlatego sprawdź to, ale jest to podstawowa koncepcja. Wszelkie uwagi / sugestie są bardzo mile widziane.
źródło
dzięki @balpha i @Kevin, łączę dwie metody razem.
w tej metodzie nie są potrzebne js.
możesz użyć
background-image
i nie potrzebujesz gradientu, aby ukryć kropki.innerHTML
z.ellipsis-placeholder
nie jest to konieczne, mogę używać.ellipsis-placeholder
, aby zachować tę samą szerokość i wysokość z.ellipsis-more
. Możeszdisplay: inline-block
zamiast tego użyć .jsfiddler
źródło
rozwiązanie javascript będzie lepsze
is-ellipsis
klasę, jeśli zmieni się rozmiar okna lub zmieni się elementgetRowRects
Element.getClientRects()
działa w ten sposóbkażdy rects w tym samym rzędzie ma taką samą
top
wartość, więc dowiedzieć się, prostokąty, o różnejtop
wartości, jak topływak
...more
jak to
wykryć zmianę rozmiaru okna lub zmianę elementu
jak to
źródło
zobacz więcej kliknij tutaj
źródło
czysta metoda css oparta na -webkit-line-clamp:
źródło
Znalazłem sztuczkę javascript, ale musisz użyć długości ciągu. Powiedzmy, że chcesz 3 linie o szerokości 250 pikseli, możesz obliczyć długość na linię, tj
źródło