Ogranicz tekst do x liczba linii i dołącz "..."

Poszukuję sposobu Javascript/jQuery + CSS, aby ograniczyć tekst (na przykład nazwę produktu) do powiedzieć, 2 linie. Ale odwiedzający muszą wiedzieć, że jest on skrócony i dlatego muszę na końcu dodać "...".Ogranicz tekst do x liczba linii i dołącz "..."

Pierwotny sposób, w jaki to zrobiłem, to umieszczenie tekstu w 1 linii, zmierzenie jego szerokości i obcięcie go tuż przed tekstem, który osiągnie 2 razy większą niż szerokość zawierającą div, ale wydaje się trudne ponieważ każda postać prawdopodobnie musi być kakorowana ze względu na jej szerokość, a nie to.

Ograniczenie do liczby znaków lub słów nie zadziała w tym przypadku - chciałbym w pełni wypełnić 2 wiersze tego div za każdym razem, zamiast mieć przerwy.

Czy istnieje dobry sposób, aby to osiągnąć zamiast używać czcionki o stałej szerokości?

Źródło

2013-05-06 Francis Kim

Jeśli używasz jQuery, weź tę wtyczkę: http://dotdotdot.frebsite.nl/ – elclanrs

@elclanrs thanks! prześlij jako odpowiedź –

OK, dodałem kolejną wtyczkę, z której wcześniej korzystałem. – elclanrs

Ponieważ używasz jQuery spróbować tych wtyczek:

Źródło

2013-05-06 23:45:19 elclanrs

Hmm ... ~ 600 LOC i zewnętrzna zależność wydaje się nieco przesadzona dla tych trzech małych kropek. Oto szybkie rozwiązanie POJS w około 20 liniach. Potrzebuje trochę pracy, musi przeszukiwać rodzeństwo i znajdować węzły tekstowe zamiast przyjmować założenia, a może i przyzwoitą obsługę zdarzeń, ale nie widzę, żeby ta liczba przekroczyła 50 LOC ... http://jsfiddle.net/ HERUT/ –

To naprawdę dobrze wygląda. Ale Autoellipsis (moja ulubiona wtyczka) to [zaledwie 200 wierszy bez komentarzy] (https://gist.github.com/elclanrs/5529573), powiedziałbym, że to wystarczająco dobre, jeśli już używasz jQuery. – elclanrs

Autoellipsis też wyglądał znacznie jaśniej, ale nie przyjrzałem się temu bliżej. Myślę, że rzeczą, która przeszkadza mi w tego typu skryptach, jest dostrzeżona potrzeba jQuery; Wydaje się, że kiedy robisz takie intensywne działania DOM, możesz równie dobrze pozbyć się zależności i po prostu napisać dodatkowy kod obsługi zdarzenia lub cokolwiek samemu ... wydaje się, że 99% jQuery nie jest potrzebne dla skryptu takiego jak ten . Autoellipsis z pewnością wyglądał jak lepszy kandydat do zostania skryptem POJS. –

Możemy użyć do tego css:

.truncate { 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: inline-block; /* for links */ 
}

Źródło

2015-09-11 04:53:28 insign

Z wyjątkiem tego, że działa tylko dla pojedynczego wiersza tekstu, a nie, powiedzmy, dwóch linii tekstu . –

Ogranicz tekst do x liczba linii i dołącz "..."

Odpowiedz

Powiązane problemy