Ich arbeite mit AngularJS und Ionic. Ich verwende das ng-bind-html, um Daten von einer Rest-API abzurufen. Ich möchte die Anzahl der Zeichen begrenzen, habe aber auch drei Punkte nach den Zeichen, um dem Benutzer zu zeigen, dass mehr zu lesen ist ...
Bisher habe ich:
<p ng-bind-html="item.excerpt | limitTo: 100"></p>
Dies begrenzt jedoch nur die Zeichen und schneidet sie ab.
6 Antworten
Dies wurde mit https://github.com/sparkalow/angular-truncate behoben. Sehr einfach und benutzerfreundlich und kann mit ng-bind-html verwendet werden
Die Klasse zum Abschneiden von Text in Bootstrap hat den Job für mich erledigt.
Hinweis: Der Container sollte eine feste Breite oder einen festen Spaltenanteil haben, damit dies funktioniert
Ref: https://getbootstrap.com/docs/4.0/utilities / text / # Textumbruch und -überlauf
Ehrlich gesagt scheint Ihre Frage eher auf CSS ausgerichtet zu sein
Sie können Text abschneiden und Punkte (...) mit "Auslassungspunkten" hinzufügen.
Beispiel, wenn Sie in HTML etwas haben wie:
<p class='ellipsis'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur<p>
Und Sie fügen so etwas auf CSS hinzu:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p.block {
width: 300px;
}
Ergebnis ist so etwas wie:
<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p>
Wenn Sie eine Schaltfläche "Lesen Sie mehr" implementieren möchten, entfernen Sie beim Klicken einfach die Auslassungsklasse, und der gesamte Text wird angezeigt.
Mehr Infos dort: Ellipsen-Informationen
Wenn Sie eine ältere ionische Version verwenden, die beim Binden kein 'limitTo:' hat, wie die Antwort von @ c0r3yz, versuchen Sie dies in Ihrem HTML
{{ item.excerpt.length > 100 ? item.excerpt.substring(0,100)+"..." : item.excerpt }}
Für einen reinen Winkelansatz können Sie Folgendes tun:
{{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}}
In meinem Projekt habe ich mir diesen Filter ausgedacht:
angular.module('yourModule').filter('limitToDots', function($filter) {
return function(input, limit, begin, dots) {
if (!input || input.length <= limit) {
return input;
}
begin = begin || 0;
dots = dots || '...';
return $filter('limitTo')(input, limit, begin) + dots;
};
});
Verwendung:
<span>{{ text | limitToDots : 50 }}</span>
<span ng-bind="text | limitToDots : 50"></span>
<span ng-bind-html="text | limitToDots : 50"></span>