Czy można ograniczyć długość tekstu do linii „n” za pomocą CSS (lub wyciąć go, gdy zostanie przepełniony w pionie).
text-overflow: ellipsis;
działa tylko dla 1 wiersza tekstu.
oryginalny tekst:
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
mus tincidunt! Dapibus sed aenean, magna sagittis, lorem velit
pożądany wynik (2 linie):
Ultrices natoque mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum ...
Odpowiedzi:
Można to zrobić za pomocą nieoficjalnej składni zaciskania linii , a od Firefox 68 działa we wszystkich głównych przeglądarkach.
O ile nie dbasz o użytkowników IE, nie musisz tego robić
line-height
i miećmax-height
awarie.źródło
-webkit-box-orient: vertical;
ukryciem się podczas kompilacji scss, spróbuj tego/* autoprefixer: ignore next */ -webkit-box-orient: vertical;
Co możesz zrobić, to:
gdzie
max-height:
=line-height:
×<number-of-lines>
wem
.źródło
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
aby pojawiła się elipsa. Ale to będzie działać tylko w Chrome. Aby zapoznać się z rozwiązaniem działającym również w Firefoksie, spójrz tutaj: stackoverflow.com/a/20595073/1884158 A oto przydatny samouczek na ten temat: css-tricks.com/line-clampinDziałające rozwiązanie dla różnych przeglądarek
Ten problem trapi nas wszystkich od lat.
Aby pomóc we wszystkich przypadkach, opracowałem podejście CSS i podejście jQuery na wypadek problemów z css.
Oto rozwiązanie CSS , które wymyśliłem, które działa w każdych okolicznościach, z kilkoma drobnymi zastrzeżeniami.
Podstawy są proste, ukrywa przepełnienie rozpiętości i ustawia maksymalną wysokość na podstawie wysokości linii, jak zasugerował Eugene Xa.
Potem jest pseudoklasa po div zawierającym, który ładnie umieszcza elipsę.
Ostrzeżenia
To rozwiązanie zawsze umieszcza wielokropek, niezależnie od tego, czy jest to potrzebne.
Jeśli ostatni wiersz kończy się końcowym zdaniem, skończysz z czterema kropkami ....
Musisz być zadowolony z uzasadnionego wyrównania tekstu.
Elipsa będzie po prawej stronie tekstu, który może wyglądać niechlujnie.
Kod + Snippet
jsfiddle
Podejście jQuery
Moim zdaniem jest to najlepsze rozwiązanie, ale nie każdy może korzystać z JS. Zasadniczo jQuery sprawdzi dowolny element .text, a jeśli będzie więcej znaków niż wstępnie ustawiony max var, odetnie resztę i doda elipsę.
Nie ma żadnych zastrzeżeń do tego podejścia, jednak ten przykład kodu ma jedynie na celu zademonstrowanie podstawowej idei - nie użyłbym tego w produkcji bez ulepszenia go z dwóch powodów:
1) Przepisze wewnętrzny html elementów .text. czy to potrzebne czy nie. 2) Nie sprawdza się, czy wewnętrzny html nie ma zagnieżdżonych elementów - więc w dużym stopniu polegasz na autorze, aby poprawnie używał .text.
Edytowane
Dzięki za złapanie @markzzz
Kod i fragment
jsfiddle
źródło
O ile widzę, byłoby to możliwe tylko przy użyciu,
height: (some em value); overflow: hidden
a nawet wtedy nie byłoby to fantazyjne...
na końcu.Jeśli nie jest to opcja, myślę, że jest to niemożliwe bez wstępnego przetwarzania po stronie serwera (trudne, ponieważ przepływu tekstu nie można wiarygodnie przewidzieć) lub jQuery (możliwe, ale prawdopodobnie skomplikowane).
źródło
.mytext
z nich za pomocą jQuery, dowiedzieć się, czy ma więcej treści niż jest widoczne, i dodać...
ręcznie. W ten sposób jesteś kompatybilny z klientami bez JS, a klienci z JS mogą mieć dekorację. Może warto osobne pytanie dla guru jQuery; być może uda się to zrobić stosunkowo łatwoRozwiązaniem tego wątku jest użycie wtyczki jquery dotdotdot . Nie jest to rozwiązanie CSS, ale daje wiele opcji linków „czytaj więcej”, dynamicznej zmiany rozmiaru itp.
źródło
następujące zajęcia CSS pomogły mi w uzyskaniu dwóch liniowych elips.
źródło
Obecnie nie możesz, ale w przyszłości będziesz mógł z niego korzystać
text-overflow:ellipis-lastline
. Obecnie jest dostępny z prefiksem dostawcy w Operze 10.60+: przykładźródło
Mam rozwiązanie, które działa dobrze, ale zamiast elipsy używa gradientu. Działa, gdy masz dynamiczny tekst, więc nie wiesz, czy będzie on wystarczająco długi, aby potrzebować elipsy. Zaletą jest to, że nie trzeba wykonywać żadnych obliczeń JavaScript i działa to w przypadku kontenerów o zmiennej szerokości, w tym komórek tabeli, i działa w różnych przeglądarkach. Używa kilku dodatkowych div, ale jest bardzo łatwa do wdrożenia.
Narzut:
CSS:
post na blogu: http://salzerdesign.com/blog/?p=453
przykładowa strona: http://salzerdesign.com/test/fade.html
źródło
źródło
Naprawdę lubię line-clamp, ale nie mam jeszcze wsparcia dla firefoxa .. więc wybieram obliczenia matematyczne i po prostu ukrywam przepełnienie
powiedzmy teraz, że chcesz usunąć i dodać tę klasę za pomocą jQuery z linkiem, będziesz musiał mieć dodatkowy piksel, więc maksymalna wysokość będzie wynosić 63 piksele, ponieważ musisz za każdym razem sprawdzać, czy wysokość jest większa niż 62px, ale w przypadku 4 linii otrzymasz fałszywą prawdę, więc dodatkowy piksel to naprawi i nie spowoduje żadnych dodatkowych problemów
wkleję dla tego przykładowy skrypt coffeescript, używa kilku domyślnie ukrytych linków, z klasami więcej-do-odczytu i mniej-do-odczytu, usunie te, których przepełnienie nie jest potrzebne i usunie ciało klasy przelewu
źródło
Jeśli chcesz skupić się na każdym z nich,
letter
możesz to zrobić, odsyłam do tego pytaniaPokaż fragment kodu
Jeśli chcesz skupić się na każdym z nich
word
, możesz zrobić w ten sposób + spacjęPokaż fragment kodu
Jeśli chcesz skupić się na każdym z nich,
word
możesz to zrobić + bez spacjiPokaż fragment kodu
źródło
Podstawowy przykładowy kod, nauka kodowania jest łatwa. Sprawdź komentarze CSS stylu.
źródło
Rozglądałem się za tym, ale potem zdaję sobie sprawę, cholera, moja witryna używa php !!! Dlaczego nie skorzystać z funkcji przycinania podczas wprowadzania tekstu i grać z maksymalną długością ....
Oto możliwe rozwiązanie również dla osób korzystających z php: http://ideone.com/PsTaI
źródło