Czy ktoś ma bardziej wyrafinowane rozwiązanie / bibliotekę do obcinania ciągów za pomocą JavaScript i umieszczania wielokropka na końcu, niż to oczywiste:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
javascript
string
truncation
naltatis
źródło
źródło
Odpowiedzi:
Zasadniczo sprawdzasz długość danego ciągu. Jeśli jest dłuższy niż podana długość
n
, przytnij go do długościn
(substr
lubslice
) i dodaj encję html…
(…) do obciętego ciągu.Taka metoda wygląda
Jeśli przez „bardziej wyrafinowany” masz na myśli obcinanie ostatniej granicy słowa w ciągu, potrzebujesz dodatkowej kontroli. Najpierw przycinasz ciąg do żądanej długości, a następnie przycinasz wynik do granicy ostatniego słowa
Możesz rozszerzyć natywny
String
prototyp za pomocą swojej funkcji. W takim przypadkustr
parametr należy usunąć iwstr
ramach funkcji zamienić nathis
:Bardziej dogmatyczni programiści mogą cię mocno skapitulować na tym („ Nie modyfikuj obiektów, których nie jesteś właścicielem ”. Nie miałbym nic przeciwko).
Podejściem bez rozszerzania
String
prototypu jest utworzenie własnego obiektu pomocniczego, zawierającego (długi) napis, który podasz i wspomnianą wcześniej metodę obcinania go. To właśnie robi poniższy fragment.Pokaż fragment kodu
Wreszcie, możesz używać CSS tylko do obcinania długich ciągów w węzłach HTML. Zapewnia mniejszą kontrolę, ale może być dobrym rozwiązaniem.
Pokaż fragment kodu
źródło
substr
to długość, więcsubstr(0,n)
zamiast tego należy ograniczyć go do pierwszychn
znaków.…
rzeczywistej elipsy (...
) w przykładowym kodzie. Jeśli próbujesz użyć tego do interakcji z interfejsami API, będziesz potrzebować encji innej niż HTML.Pamiętaj, że trzeba to zrobić tylko w przypadku przeglądarki Firefox.Wszystkie
inneprzeglądarki obsługują rozwiązanie CSS (zobacz tabelę wsparcia ):Jak na ironię, mam ten fragment kodu z Mozilla MDC.
źródło
white-space: nowrap;
). Jeśli chodzi o więcej niż jedną linię, utkniesz w JavaScript.Your picture ('some very long picture filename truncated...') has been uploaded.
Istnieją ważne powody, dla których ludzie mogą chcieć to zrobić w JavaScript zamiast CSS.
Aby skrócić do 8 znaków (w tym wielokropka) w JavaScript:
lub
źródło
.replace(/^(.{7}).{2,}/, "$1…");
zamiast tegolong
ishort
są zarezerwowane jako przyszłe słowa kluczowe przez starsze specyfikacje ECMAScript (ECMAScript 1 do 3). Zobacz MDN: Przyszłe zastrzeżone słowa kluczowe w starszych standardachUżyj skrótu lodash
lub underscore.string's truncate .
źródło
Jakoś powyższy kod nie działał dla jakiejś kopii wklejonego lub napisanego tekstu w aplikacji vuejs. Więc użyłem lodash truncate i teraz działa dobrze.
źródło
Oto moje rozwiązanie, które ma kilka ulepszeń w stosunku do innych sugestii:
To:
źródło
Najlepsza funkcja, jaką znalazłem. Kredyt dla tekstu-wielokropka .
Przykłady :
źródło
Wszystkie nowoczesne przeglądarki obsługują teraz proste rozwiązanie CSS do automatycznego dodawania wielokropka, jeśli wiersz tekstu przekracza dostępną szerokość:
(Zwróć uwagę, że wymaga to ograniczenia szerokości elementu w jakiś sposób, aby uzyskać jakikolwiek efekt).
Na podstawie https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .
Należy zauważyć, że to podejście nie ogranicza liczby znaków. To też ma nie działać, jeśli trzeba, aby umożliwić wielu wierszy tekstu.
źródło
text-direction: rtl
itext-align: left
. Zobacz davidwalsh.name/css-ellipsis-leftWiększość nowoczesnych ram JavaScript ( JQuery , Prototype , etc ...) posiadają funkcję użytkową dołączona na ciąg znaków, który obsługuje to.
Oto przykład w Prototype:
Wygląda na to, że jest to jedna z tych funkcji, którymi powinien zajmować się / utrzymywać ktoś inny. Pozwoliłbym, aby framework to obsłużył, zamiast pisać więcej kodu.
źródło
truncate()
- możesz potrzebować rozszerzenia, takiego jak podkreślenie.string ._.trunc
który dokładnie to robi.Być może przegapiłem przykład, w którym ktoś obsługuje wartości zerowe, ale 3 TOP odpowiedzi nie zadziałały dla mnie, gdy miałem wartości zerowe (Jasne, zdaję sobie sprawę, że obsługa błędów jest i milion innych rzeczy NIE jest obowiązkiem osoby odpowiadającej na pytanie, ale ponieważ Skorzystałem z istniejącej funkcji wraz z jedną z doskonałych odpowiedzi z elipsami, które według mnie były przydatne dla innych.
na przykład
javascript:
za pomocą funkcji obcięcia
Jednak w wiadomościach. Comments są zerowe spowoduje to „przerwanie”
Finał
funkcja obcinania dzięki uprzejmości KooiInc
Mój prosty moduł sprawdzający wartość null (sprawdza również literał „null” (to łapie undefined, „”, null, „null” itp.)
źródło
Czasami nazwy plików są numerowane, gdzie indeks może znajdować się na początku lub na końcu. Chciałem więc skrócić od środka struny:
Należy pamiętać, że użyłem tutaj znaku wypełnienia z więcej niż 1 bajtem w UTF-8.
źródło
Możesz użyć funkcji Ext.util.Format.ellipsis, jeśli używasz Ext.js.
źródło
Głosowałem za rozwiązaniem Kooilnc. Naprawdę ładne kompaktowe rozwiązanie. Jest jeden mały, skrajny przypadek, którym chciałbym się zająć. Jeśli z jakiegoś powodu ktoś wprowadzi naprawdę długą sekwencję znaków, nie zostanie ona obcięta:
źródło
Dzięki szybkiemu wyszukiwaniu w Google znalazłem to ... Czy to działa dla Ciebie?
źródło
Przepełnienie tekstu: wielokropek to właściwość, której potrzebujesz. Z tym i przepełnieniem: ukryte z określoną szerokością, wszystko wykraczające poza to, co daje efekt trzech kropek na końcu ... Nie zapomnij dodać spacji: nowrap lub tekst zostanie umieszczony w wielu wierszach.
źródło
Odpowiedź c_harm jest moim zdaniem najlepsza. Pamiętaj, że jeśli chcesz użyć
będziesz musiał użyć konstruktora obiektów regexp zamiast literału. Będziesz także musiał uciec przed
\S
konwersją.źródło
Użyj następującego kodu
źródło
Poprawianie rozwiązania Kooilnc:
Zwraca wartość ciągu zamiast obiektu String, jeśli nie trzeba go obcinać.
źródło
Niedawno musiałem to zrobić i skończyło się na:
Czuję się miło i czysto :)
źródło
Lubię używać .slice () Pierwszy argument to indeks początkowy, a drugi to indeks końcowy. Otrzymujesz wszystko pomiędzy.
źródło
Somewhere Smart: D
źródło
Ta funkcja wykonuje również obcięcie spacji i części słów. (Np. Matka w Ćmę ...)
stosowanie:
wynik:
źródło