Mam stronę internetową z elastycznym układem, który zmienia swoją szerokość, jeśli rozmiar okna przeglądarki zostanie zmieniony.
W tym układzie są nagłówki (h2
), które będą miały zmienną długość (w rzeczywistości są to nagłówki z postów na blogu, nad którymi nie mam kontroli). Obecnie - jeśli są szersze od okna - są podzielone na dwie linie.
Czy istnieje eleganckie, przetestowane (na różnych przeglądarkach) rozwiązanie - na przykład z jQuery - które skraca wewnętrzny kod HTML tego tagu nagłówka i dodaje „...”, jeśli tekst byłby zbyt szeroki, aby zmieścić się w jednym wierszu na bieżącym ekranie / szerokość pojemnika?
Odpowiedzi:
Mam rozwiązanie działające w FF3, Safari i IE6 + z tekstem jedno- i wielowierszowym
jquery.ellipsis.js
źródło
Poniższe rozwiązanie CSS do obcinania tekstu w jednym wierszu działa ze wszystkimi przeglądarkami wymienionymi na stronie http://www.caniuse.com w momencie pisania, z wyjątkiem przeglądarki Firefox 6.0. Zauważ, że JavaScript jest całkowicie niepotrzebny, chyba że potrzebujesz obsługi zawijania tekstu wielowierszowego lub wcześniejszych wersji przeglądarki Firefox.
Jeśli potrzebujesz wsparcia dla wcześniejszych wersji Firefoksa, sprawdź moją odpowiedź na to drugie pytanie .
źródło
Zbudowałem ten kod, używając wielu innych postów, z następującymi ulepszeniami:
display: block
do stylu, dzięki czemu działaCSS:
jquery.ellipsis.js
źródło
Moja odpowiedź obsługuje tylko tekst jednowierszowy. Sprawdź komentarz gfullam poniżej na temat widelca wieloliniowego, wygląda całkiem obiecująco.
Kilka razy przepisałem kod z pierwszej odpowiedzi i myślę, że to powinno być najszybsze.
Najpierw znajduje „Szacowaną” długość tekstu, a następnie dodaje lub usuwa znak, aż szerokość będzie poprawna.
Logika, której używa, jest pokazana poniżej:
Po znalezieniu „szacunkowej” długości tekstu znaki są dodawane lub usuwane, aż do osiągnięcia żądanej szerokości.
Jestem pewien, że wymaga pewnych poprawek, ale oto kod:
źródło
Na wszelki wypadek, gdybyście wylądowali tutaj w 2013 roku - oto podejście do czystego CSS, które znalazłem tutaj: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
To dobrze działa.
źródło
text-overflow
nie działa ztextarea
elementami (stan na 2015). Jeśli potrzebujesz wsparciatextarea
, możesz to osiągnąć, modyfikując zaakceptowaną odpowiedź lub korzystając z tego rozwidlenia .Zrobiłem naprawdę fajną wtyczkę jQuery do obsługi wszystkich odmian wielokropka o nazwie ThreeDots @ http://tpgblog.com/threedots
Jest znacznie bardziej elastyczny niż podejścia CSS i obsługuje znacznie bardziej zaawansowane, konfigurowalne zachowania i interakcje.
Cieszyć się.
źródło
Bardziej elastyczna wtyczka jQuery umożliwiająca zachowanie elementu po elipsie (na przykład przycisk „czytaj więcej”) i aktualizację onWindowResize. Działa również w przypadku tekstu ze znacznikami:
http://dotdotdot.frebsite.nl
źródło
Wtyczka trunk8 jQuery obsługuje wiele wierszy i może używać dowolnego kodu HTML, a nie tylko znaków wielokropka, dla przyrostka obcięcia: https://github.com/rviscomi/trunk8
Demo tutaj: http://jrvis.com/trunk8/
źródło
W CSS można to zrobić w dość prosty sposób wykorzystując fakt, że IE rozszerza to o niestandardowe standardy i obsługę FF
:after
Możesz to również zrobić w JS, jeśli chcesz, sprawdzając scrollWidth celu i porównując go z szerokością jego rodziców, ale imho jest to mniej niezawodne.
Edycja: najwyraźniej jest bardziej rozwinięta niż myślałem. Wkrótce może pojawić się obsługa CSS3, a niektóre niedoskonałe rozszerzenia są dostępne do wypróbowania.
Ta ostatnia to dobra lektura.
źródło
Ostatnio zrobiłem coś podobnego dla klienta. Oto wersja tego, co dla nich zrobiłem (przykład przetestowany we wszystkich najnowszych wersjach przeglądarek w systemie Win Vista). Nie jest idealny na całej planszy, ale można go dość łatwo dostosować.
Demo: http://enobrev.info/ellipsis/
Kod:
źródło
Cóż, jednym prostym rozwiązaniem, które nie do końca dodaje „...”, ale zapobiega podziałowi <h2> na dwie linie, byłoby dodanie tego fragmentu css:
Przemyślałem to trochę dłużej i wymyśliłem takie rozwiązanie, musisz owinąć zawartość tekstową swojego tagu h2 innym tagiem (np. Span) (lub alternatywnie zawinąć h2s czymś, co ma podaną wysokość), a następnie możesz użyć tego rodzaju javascript, aby odfiltrować niepotrzebne słowa:
źródło
Oto kolejne rozwiązanie JavaScript. Działa bardzo dobrze i bardzo szybko.
https://github.com/dobiatowski/jQuery.FastEllipsis
Przetestowano w Chrome, FF, IE w systemach Windows i Mac.
źródło
Istnieje rozwiązanie dla tekstu wielowierszowego z czystym CSS. Nazywa się
line-clamp
, ale działa tylko w przeglądarkach webkit. Jest jednak sposób, aby to naśladować we wszystkich nowoczesnych przeglądarkach (wszystkie nowsze niż IE8). Ponadto będzie działać tylko na jednolitym tle, ponieważ potrzebujesz obrazu tła, aby ukryć ostatnie słowa ostatniego wiersza. Oto jak to działa:Biorąc pod uwagę ten html:
Oto CSS:
ellipsis_bg.png to obraz tego samego koloru tła, który miałby około 100 pikseli szerokości i taką samą wysokość, jak wysokość linii.
Nie jest zbyt ładny, ponieważ tekst może być wycięty w środku litery, ale może być przydatny w niektórych przypadkach.
Źródła: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php
źródło
Wielowierszowe wielokropki w czystym CSS dla zawartości tekstowej
Sprawdź fragment, aby zobaczyć przykład na żywo.
źródło
Jest to podobne do Alexa, ale robi to w czasie logowania zamiast liniowo i przyjmuje parametr maxHeight.
źródło
Istnieje proste rozwiązanie jQuery autorstwa Devona Govetta :
https://gist.github.com/digulla/5796047
źródło
Przepisałem funkcję Alexa do biblioteki MooTools. Zmieniłem to trochę na skok słów, zamiast dodawać wielokropek w środku słowa.
źródło
Nie mogłem znaleźć skryptu, który działałby dokładnie tak, jak chciałem, więc zrobiłem mój własny dla jQuery - sporo opcji do ustawienia, a więcej na ich drodze :)
https://github.com/rmorse/AutoEllipsis
źródło
Byłem jednak nieco zaskoczony zachowaniem css.
Chyba że podałem szerokość kontrolki, do której musiałem powiązać wielokropek, nie pomogło. Czy szerokość to właściwość, którą trzeba dodać ??? Proszę, przedstaw swoje myśli.
źródło
ZRÓB ELIPSY, UŻYWAJĄC TYLKO CSS
* Ten kod działa w większości obecnych przeglądarek. Jeśli napotkasz jakiś problem z Operą i IE (co prawdopodobnie nie będzie), dodaj je w stylu:
* Ta funkcja jest częścią CSS3. Jego pełna składnia to:
źródło
Oto ładna biblioteka widżetów / wtyczek, która ma wbudowane wielokropki: http://www.codeitbetter.co.uk/widgets/ellipsis/ Wszystko, czego potrzebujesz, aby to zrobić, odwołaj się do biblioteki i wywołaj:
źródło
możesz to zrobić dużo łatwiej tylko z css, na przykład: tryb sass
i masz wielokropek;)
źródło
Podobnie jak @acSlater nie mogłem znaleźć czegoś do tego, czego potrzebowałem, więc stworzyłem własne. Udostępnianie na wypadek, gdyby ktoś inny mógł użyć:
Metoda: Stosowanie: Kod i link demonstracyjny: https://gist.github.com/cemerson/10368014źródło
źródło