Ich wollte das Gleiche tun, also habe ich eine Richtlinie erstellt. Schau mal hier: Ссылка

Die Verwendung ist ziemlich einfach:

Dabei ist 100 das Zeichenlimit, das Sie angeben möchten.

UPDATE: dd-text-collapse

Für weitere Informationen können Sie angular limitTo verwenden, um Ihren Absatz auf die Zeichenlänge zu beschränken, anstatt den Absatz auf Zeilennummern zu beschränken.

Sie können etwas wie folgt verwenden:

in html

im Controller

Es kann einige Abhilfe geben.

Grundidee ist so

Über die Schaltfläche.

Wenn die Schaltfläche außerhalb des Textbereichs ist, ist das kein Problem für Sie, denke ich. Wenn Sie die Schaltfläche innerhalb des Elements benötigen, gibt es 2 Möglichkeiten.

1. Wenn Sie möchten, dass die Position rechts unten festgelegt wird,       Erstellen Sie einen Hintergrund mit Farbverlauf für die Schaltfläche, Fade-Out-Effekt.       Es sieht nett und sehr einfach aus.

   hier ist jsfiddle: Ссылка . Wenn Sie den Status wechseln, ändern Sie tatsächlich die Klasse des Elements.

2. Wenn Sie es direkt nach dem Ende des Textes wollen? es ist ein wenig schwierig, denn selbst wenn die Texthöhe 3 Zeilen beträgt, können Sie nicht sicher sein ob es 3 Zeilen Höhe bleibt, nach dem Hinzufügen einer Schaltfläche neben es.

   Ich denke, eine Möglichkeit ist die Verwendung der Range-API, um den Absatz zu berechnen Dimensionen, (Ich habe die API in meinem Collamar.com verwendet, es ist mächtig aber verschiedene Browser haben unterschiedliche Verhaltensweisen). Eigentlich kannst du es Holen Sie sich die Dimensionen jeder Zeile dynamisch. Und von einigen Rückwärts-Schleifen, können Sie die entsprechende Teilzeichenfolge des Textes erhalten, im zusammengeklappten Modus zu zeigen, was genau richtig für 3 Zeilen ist mit einem Knopf. (der api doc ist hier: Ссылка )

   Also jetzt, wenn Sie den Status wechseln, ändern Sie tatsächlich die Text. nicht die Klasse .

Hier beginnt der Code, wenn es in Angular

Vorlage

Erstens ist diese Art von Feature ein eigenständiges Modul, das Sie überall wiederverwenden können. In Ihrer Vorlage erstellen wir eine neue Direktive autoFolded , so ähnlich:

directive.coffee

Dann behandeln wir alle Logik in der Definition der Direktive (Entschuldigung für das Schreiben in Kaffee)

Hier ist die Erklärung

für diese Direktive enthält Text, den sie nicht kennt, also ist es eine transluzente Direktive. Wie ein modales Popup enthält es den Text und eine Umschalttaste.

Wenn Sie auf die Schaltfläche klicken, wird das Umschalten tatsächlich ausgeführt. Wenn es entfaltet ist, dann falte es; Wenn geflogen, dann entfaltet. Wir erreichen dies durch Umschalten der Klassennamen, die Kälte ist einfach

und wir verwenden ng-click="toggleFoldedState()" , um diese Aktion an die Umschalttaste

Wir müssen einige anfängliche Arbeiten machen, um den Text zu falten, wenn er groß genug ist, um die Seite zu laden. Allerdings ist link Funktion der Direktive, um den tatsächlichen Dom zu erzeugen, bevor dom rendering.So in link , können wir die Höhe nicht kennen, deshalb registrieren wir das init() auf ngcontentloaded event:

hier verwende ich 48px als 3-Zeilen-Höhe, Sie können Ihre eigenen definieren oder dynamisch aus dem Dom berechnen, wie content.css('lineHeight') .

Da dies nach dem dom-Rendering gemacht wird, wird der Text bereits vor init () angezeigt. Es wird einen hässlichen SlideUp-Effekt geben. Deshalb verstecken wir zuerst das Dom mit css (wie folgt) und content.show() in init

Damit sind wir fertig mit Direktive, der gefaltete / unfolierte Zustand wird von className gesteuert. hier gehen wir.

css.sass

(Entschuldigung, ich schrieb es in sass )

Der Text der Umschalttaste und die Sichtbarkeit davon werden also alle von der Klasse des übergeordneten Elements gesteuert.

für den Elternteil 1. Wenn der Text keine 3-Zeilen-Höhe hat, hat er nur 'auto-folded' als CSS-Klasse, so dass die Schaltfläche ausgeblendet ist

2. Wenn der Text mehr als drei Zeilen hat, in init() process, ist classNames 'auto-folded auto-folded--folded' .
   dann wird der Knopf angezeigt. Durch Anklicken werden die Klassennamen der Eltern zwischen 'auto-folded--folded' und 'auto-folded--unfolded' umgeschaltet.