Von Text nur 3 Zeilen anzeigen lassen

[Gerch2003]

Hallo,

ich bin auf der Suche nach einem Javascript oder einem PHP-Code mit dem ich von sagen wir mal einem Text der 10 Zeilen lang ist nur 3 Zeilen angezeigt werden.

Der Text wird aus der Datenbank ausgelesen und ist wie schon beschrieben ca. 10 Zeilen lang.
Nun möchte ich dass von diesen 10 Zeilen aber nur 3 angezeigt werden und danach einfach ein "..." kommt.

Ich habe das schön öfters auf einigen Seiten gesehen, weiß nur selber nicht wie ich das realisierten könnte.

Mit Javascript kenne ich mich nicht sehr gut aus, da bräuchte ich dann falls das nur mit Javascript geht noch etwas Hilfe.
Besser wäre wenn das ganze mit PHP zu realisieren wäre.

Ich hoffe mal ihr wisst was ich mein und es kann mir jemand helfen.

Gruß Gerch

[suit]

Hallo,

ich bin auf der Suche nach einem Javascript oder einem PHP-Code mit dem ich von sagen wir mal einem Text der 10 Zeilen lang ist nur 3 Zeilen angezeigt werden.

Wie definierst du eine Zeile?

Der Text wird aus der Datenbank ausgelesen und ist wie schon beschrieben ca. 10 Zeilen lang.

Siehe meine erste Frage

Ich hoffe mal ihr wisst was ich mein und es kann mir jemand helfen.

Sogut wie jede C-ähnliche Sprache hat eine Funktion um Teile einer Zeichenkette auszugeben - namentlich substring() in als Methode in JavaScript bzw. substr() als Funktion in PHP.

[Gerch2003]

Wie definierst du eine Zeile?

Also sagen wir ich habe eine Tabelle in der sich das Feld id="Text" befindet.
Dieses Feld hat eine Breite von 400px. Und in diesem Feld wird aus der Datenbank der Text ausgegeben. Nun sollen aber von dem Text der 10 Zeilen lang ist nur 3 ausgegeben werden.

Dazu sollte ich vielleicht noch sagen, dass ich keine manuellen Zeilenumbrüche habe, sondern sich die Zeilenumbrüche automatisch nach der Breite (400px) des Feldes richten.

»» Ich hoffe mal ihr wisst was ich mein und es kann mir jemand helfen.

Sogut wie jede C-ähnliche Sprache hat eine Funktion um Teile einer Zeichenkette auszugeben - namentlich substring() in als Methode in JavaScript bzw. substr() als Funktion in PHP.

Das ist gut zu wissen.

[ChrisB]

Hi,

Wie definierst du eine Zeile?

Also sagen wir ich habe eine Tabelle in der sich das Feld id="Text" befindet.
Dieses Feld hat eine Breite von 400px. Und in diesem Feld wird aus der Datenbank der Text ausgegeben. Nun sollen aber von dem Text der 10 Zeilen lang ist nur 3 ausgegeben werden.

Dazu sollte ich vielleicht noch sagen, dass ich keine manuellen Zeilenumbrüche habe, sondern sich die Zeilenumbrüche automatisch nach der Breite (400px) des Feldes richten.

Siehst du, da hast du schon ein Problem.

Du weisst schlicht und einfach nicht, wie viel Text in meinem Browser in eine Zeile passt.

MfG ChrisB

[suit]

Dazu sollte ich vielleicht noch sagen, dass ich keine manuellen Zeilenumbrüche habe, sondern sich die Zeilenumbrüche automatisch nach der Breite (400px) des Feldes richten.

Was passiert, wenn sich die Schriftgröße ändert?

Das ist gut zu wissen.

Tendentiell würde ich das ganze serverseitig per PHP erledigen - auch wenn es bereits andere Möglichkeiten gäbe, aber das ist Zukunftsmusik.

Wenn du dich daran versuchst, wirst du schnell auf mindestens Probleme stoßen. Diese verrate ich dir aber vorerst nicht :)

[Gerch2003]

Ja also die Schriftgröße sollte sich eigentlich nicht ändern.
Da sind per CSS 11px vorgegeben. Genauso wie Schriftart.

Mir kam aber gerade ein anderer Gedanke.
Man könne einfach z.B. die ersten 300 Zeichen darstellen lassen. Da der Browser sowieso seine Zeilenumbrüche automatisch macht, erscheinen am Ende dann auch nur eine bestimmte anzahl an Zeilen.

Wenn dann ein Wort abgeschnitten ist, weil die 300 Zeichen zu Ende waren ist auch kein Problem, da ich hinten dran sowieso noch ein ... setzen wollte.

[ChrisB]

Hi,

Ja also die Schriftgröße sollte sich eigentlich nicht ändern.
Da sind per CSS 11px vorgegeben. Genauso wie Schriftart.

Da muss sich mein Browser weder dran halten (viele Nutzer geben Mindestgrössen für Schrift vor), noch muss die Schriftart, die du gerne hättest, überhaupt auf meinem System vorhanden sein.

Man könne einfach z.B. die ersten 300 Zeichen darstellen lassen. Da der Browser sowieso seine Zeilenumbrüche automatisch macht, erscheinen am Ende dann auch nur eine bestimmte anzahl an Zeilen.

Wenn dann ein Wort abgeschnitten ist, weil die 300 Zeichen zu Ende waren ist auch kein Problem, da ich hinten dran sowieso noch ein ... setzen wollte.

Gut; dazu wurden dir schon in der allerersten Antwort zielführende Hinweise gegeben.

MfG ChrisB

[Gerch2003]

Hi,

»» Ja also die Schriftgröße sollte sich eigentlich nicht ändern.
»» Da sind per CSS 11px vorgegeben. Genauso wie Schriftart.

Da muss sich mein Browser weder dran halten (viele Nutzer geben Mindestgrössen für Schrift vor), noch muss die Schriftart, die du gerne hättest, überhaupt auf meinem System vorhanden sein.

Ja das ist klar, aber standart Schriftarten wie Arial oder Verdana sollten doch bei jedem vorhanden sein und auch so dargestellt werden, oder gibts da auch wieder unregelmäßigkeiten?

Gut; dazu wurden dir schon in der allerersten Antwort zielführende Hinweise gegeben.

Jap :-)
Les mir auch grad schon das Manual von substr() durch.
Habs zwar nur noch nich ganz gerafft, aber das sollte werden.

[suit]

Ja das ist klar, aber standart Schriftarten wie Arial oder Verdana sollten doch bei jedem vorhanden sein und auch so dargestellt werden, oder gibts da auch wieder unregelmäßigkeiten?

Natürlich. Und auch wenn ich Verdana auf meinem Rechner habe, heisst das noch lange nicht, dass ich möchte, dass die Schrift in meinem Browser mit Verdana dargestellt wird - andere Benutzer können da anders denken.

Standard schreibt man übrigens mit D am Ende.

[Auge]

Hallo

»» »» Ja also die Schriftgröße sollte sich eigentlich nicht ändern.
»» »» Da sind per CSS 11px vorgegeben. Genauso wie Schriftart.
»»
»» Da muss sich mein Browser weder dran halten (viele Nutzer geben Mindestgrössen für Schrift vor), noch muss die Schriftart, die du gerne hättest, überhaupt auf meinem System vorhanden sein.
»»
Ja das ist klar, aber standart Schriftarten wie Arial oder Verdana sollten doch bei jedem vorhanden sein und auch so dargestellt werden, oder gibts da auch wieder unregelmäßigkeiten?

Unregelmäßigkeiten? Nein, nur Lizenzprobleme oder Vorlieben, Betriebssysteme mit anderen mitgelieferten Schriften ...

Die von dir genannten Schriftarten sind wohl auf so ziemlich jedem Windowsrechner zu finden. Speziell bei Arial ist zu beachten, dass es davon diverse Abwandlungen gibt die sich leicht unterscheiden können (damit ist jetzt nicht die Bold-Variante gemeint, die sieht schon auf den ersten Blick sehr anders aus). Gebe bei Verwendung von Arial zumindest noch Helvetica als Alternative (die sieht nicht umsonst fast gleich aus) und ganz allegemein eine generische Schriftfamilie an. In diesem Fall wäre das "sans-serif". Letztere sorgt dafür, dass, wenn keine der angegebenen Schriftarten installiert ist, wenigstens eine ähnliche Schriftart verwendet wird.

Beispiel:
body { font:Arial,Helvetica,Verdana,sans-serif; }

Tschö, Auge

[Klawischnigg]

Hi there,

Ja das ist klar, aber standart Schriftarten wie Arial oder Verdana sollten doch bei jedem vorhanden sein und auch so dargestellt werden, oder gibts da auch wieder unregelmäßigkeiten?

Auch wenn es nicht jedem bekannt sein dürfte, es ist nicht nur ein Gerücht, daß es tatsächlich Computer gibt, auf denen Windows NICHT installiert ist. Und einem weiteren unbestätigten Gerücht zufolge werden das mit jedem "neuen" Windowsbetriebssystem immer mehr.

Somit sind Arial und Verdana eigentlich keine Standardschriftarten. Im Grunde genommen kann man als Webentwickler nur auf vier "Schriftarten" (oder Schriftfamilien) zurückgreifen: Serifenschrift (serif), serifenlose Schrift (sans-serif), eine nichtproportionale Schrift (monospace) und irgendeine skurile Schriftart, die auf Windowsrechner zB als MS Comic dargestellt wird. (fantasy). CSS kennt afaik noch eine Schreibschriftfamilie, die mit cursive ausgezeichnet wird, darauf, wie das aber auf dem jeweilen Rechner dargestellt wird, hast Du als Entwickler imho so gut wie gar keinen Einfluss.

Um irgendwelche Schrifteffekte oder auch nur bessere Lesbarkeit zu erzielen ist es mE besser, Laufweite, Buchstabenabstand oder Ähnliches zu verändern und einzustellen als sich auf bestimme installierte Schriftarten auf dem Anwenderrechner zu verlassen...

[Auge]

Hallo

Ja also die Schriftgröße sollte sich eigentlich nicht ändern.
Da sind per CSS 11px vorgegeben. Genauso wie Schriftart.

Hmm, an dieser Schriftgröße hätte ich keine Freude. Aber, schwuppdiwupp [Strg]+[+] gedrückt, und schon sind deine Vorgaben überschrieben. Mache dir einfach klar, dass du nicht (bzw. nur bedingt) Herr der Anzeige im Browser deines Besuchers bist. Lebe damit, dass deine Seite vielleicht nicht 100%-ig so angezeigt wird, wie du es willst. Um ein Pixel muss man sich nicht streiten, weder in der Breite noch in der Schriftgröße. Du willst einen Teaser mit 300 Zeichen anbieten, tue es und mache dir keinen Kopf darum, ob der gekürzte Text beim Besucher zwei, drei oder vier zeilen einnimmt.

Der Verzicht auf die vollständige Durchsetzung der gewollten Anzeige erspart dir eventuell ein Magengeschwür und der "Gemeinschaft der Versicherten" die für das Magengeschwür nötigen Ausgaben.

Man könne einfach z.B. die ersten 300 Zeichen darstellen lassen. Da der Browser sowieso seine Zeilenumbrüche automatisch macht, erscheinen am Ende dann auch nur eine bestimmte anzahl an Zeilen.

Richtig, man kann die Zeichen zählen, man kann mit etwas mehr Aufwand auch die Worte zählen. Man kann mit der Vorgabe x Zeichen oder x Worte den Text auch bedingungslos abschneiden, ohne vorher nachzuzählen. Geht alles. Ich würde das serverseitig (also mit PHP oder Perl oder ...) erledigen. Die dazu notwendigen Funktionen findest du im PHP-Manual unter der Rubrik Zeichenkettenfunktionen. Stöbere da mal rum, die Kurzbeschreibung der Funktionen auf dieser Menüseite gibt dir erste Hinweise, welche Funktionen du brauchst.

Wenn dann ein Wort abgeschnitten ist, weil die 300 Zeichen zu Ende waren ist auch kein Problem, da ich hinten dran sowieso noch ein ... setzen wollte.

Dann hänge die Zeichenkette nach dem Zurechtschnippeln hinten ran. Das ist ja nun das Einfachste. :-)

Tschö, Auge

[Gunnar Bittersmann]

@@suit:

nuqneH

auch wenn es bereits andere Möglichkeiten gäbe,

Die gibt es für einzeilige Ausgabe, nicht für dreizeilige ...

aber das ist Zukunftsmusik.

... und das für alle heutzutage aktuellen Browser.

Qapla'

[Gunnar Bittersmann]

@@Gerch2003:

nuqneH

Der Text wird aus der Datenbank ausgelesen und ist wie schon beschrieben ca. 10 Zeilen lang.

Circa. Nichts Genaues weiß man nicht.

Nun möchte ich dass von diesen 10 Zeilen aber nur 3 angezeigt werden und danach einfach ein "..." kommt.

Unter der Annahme, dass die Zeilenhöhe 1.2em beträgt:

p  
{  
  height: 3.6em;  
  overflow: hidden;  
}

Nur das mit der Ellipse wird nichts. Kannst aber aus der Not eine Tugend machen und '...' (größer und grau oder farbig) als Hintergrundbild rechts unten in der 'p'-Box plazieren.

Qapla'

[gLan]

Hallo,
ein Ansatz wäre folgender:

  
  
$text = "Das ist dein gaaaaaanz langer Text.... Der ist viel zu lang, um ordentlich angezeigt zu werden, deswegen werden nur die ersten 50 Zeichen und die Zeichen bis zum nächsten Leerzeichen ausgegeben. Das dient dazu, dass nicht mitten in einem Wort abgebrochen wird.";  
  
$regEx = '°^(.{50}[^\ ]*\ )°i';  
$vorschau = preg_replace($regEx, '$1', $text);  
  
  
echo $vorschau;  

So in der Art wäre eine Idee...

gLan

[suit]

So in der Art wäre eine Idee...

Ja, man kann auch mit einer nuklearen Gefechtskopf ein Loch im Garten graben - warum reguläre Audrücke verwenden, wenn es doch mit einfachen und leichter verständlichen Zeichenkettenfunktionen (die vermutlich sogar schneller sind) auch geht?

[gLan]

Hallo,

»» So in der Art wäre eine Idee...

Ja, man kann auch mit einer nuklearen Gefechtskopf ein Loch im Garten graben - warum reguläre Audrücke verwenden, wenn es doch mit einfachen und leichter verständlichen Zeichenkettenfunktionen (die vermutlich sogar schneller sind) auch geht?

Das dachte ich mir auch einmal: Aber den Grund habe ich doch schon gesagt: Wenn ich die ersten 50 Zeichen nur nehme, dann kann das ganze mitten in einem Wort abgebrochen sein, und DAS ist dann sicher nicht so toll.

Deswegen nehme ich ja die ersten 50 Zeichen plus die Zeichen, die bis zum nächsten Leerzeichen folgen... Das kann man mit string-Funktionen nicht machen, oder?

gLan

[suit]

Deswegen nehme ich ja die ersten 50 Zeichen plus die Zeichen, die bis zum nächsten Leerzeichen folgen... Das kann man mit string-Funktionen nicht machen, oder?

Dann hast du aber mehr als 50 Zeichen :) mit explode() am gewünschten Trennzeichen (Leerzeichen), entfernen des letzten Elements und dann wieder implode() mit Leerzeichen :) ist das problem auch schnell gelöst und ihmo eben einfacher verständlich (vor allem wenn man den Code schnell überfliegt).

Weiters ist dann immer noch nicht bedacht (in beiden Fällen) dass ungeschlossene HTML-Elemente entstehen können oder dass mitten in einem HTML-Element abgebrochen wird.

Da wirds mit einem regulären Ausdruck schon extrem komplziert (wenn nicht unmöglich).

[gLan]

Hallo,

»» Deswegen nehme ich ja die ersten 50 Zeichen plus die Zeichen, die bis zum nächsten Leerzeichen folgen... Das kann man mit string-Funktionen nicht machen, oder?

Dann hast du aber mehr als 50 Zeichen :) mit explode() am gewünschten Trennzeichen (Leerzeichen), entfernen des letzten Elements und dann wieder implode() mit Leerzeichen :) ist das problem auch schnell gelöst und ihmo eben einfacher verständlich (vor allem wenn man den Code schnell überfliegt).

ok, das ist dann zwar wieder einfacher zu verstehen, dauert aber vermutlich länger (es werden 2 funktionen aufgerufen). Außerdem sollte man seinen Code immer gut dokumentieren, so dass es mit der Verständlichkeit eigentlich nicht das Problem wäre.

Weiters ist dann immer noch nicht bedacht (in beiden Fällen) dass ungeschlossene HTML-Elemente entstehen können oder dass mitten in einem HTML-Element abgebrochen wird.

Ich gehe mal davon aus, dass in so einem Text kein HTML-Element drin ist. Und wenn doch, dann müsste man sich das ganze in Verbindung mit einem BB-Code-Parser machen, der den Text in einen Baum umwandelt und dann erst die Vorschau erstellt und. ggf. noch nicht "beendete" Elemente automatisch "beenden"... Das wäre aber nicht nur zu aufwendig, sonder würde auch von der implementierung her viel zu lange dauern.

Da wirds mit einem regulären Ausdruck schon extrem komplziert (wenn nicht unmöglich).

Ich bin da außerdem der meinung, dass es mit einem RegExp möglich wäre.
Außerdem: mit string-Funktionen wäre DAS dann auf GAR keinen Fall möglich.

gLan

[suit]

ok, das ist dann zwar wieder einfacher zu verstehen, dauert aber vermutlich länger (es werden 2 funktionen aufgerufen). Außerdem sollte man seinen Code immer gut dokumentieren, so dass es mit der Verständlichkeit eigentlich nicht das Problem wäre.

Natürlich sollte alles vernünftig dokumentiert sein - aber auch verständlich programmiert und nicht unnötig "verkorkst" bzw verschleiert :)

Ich gehe mal davon aus, dass in so einem Text kein HTML-Element drin ist.

Warum? Stell dir einen Wikipedia-Artikel vor - idR eines der ersten Worte das Lemma und zumindest mit einem strong-Element ausgezeichnet. Aber auch Links oder ähnliches folgen gerne mal in den ersten paar Wörtern. Für einen gekürzten RSS-Feed ist es also durchaus erforderlich, dieses zu beachten.

Ich bin da außerdem der meinung, dass es mit einem RegExp möglich wäre.

Ich habe keine Meinung dazu - jedenfalls steige ich mit meinen Kenntnissen aus und wüsste nicht wo ich bei einem derart komplexen Problem anfangen sollte.

Außerdem: mit string-Funktionen wäre DAS dann auf GAR keinen Fall möglich.

Doch, sogar relativ einfach. Aber mit einem entsprechenden XML/HTML-Parser ist man hier wesentlich besser bedient - DOM XML ist z.B. eine Möglichkeit.

Hier müsste man nur in einer Schleife so lange Knoten/Elemente anfügen, bis die gewünschte Mindestzeichenzahl überschritten ist. Und dann im zuletzt hinzugefügten Knoten wieder Textteile rauskürzen bis man innerhalb des Grenzwerts ist.

[Gunnar Bittersmann]

@@gLan:

nuqneH

Deswegen nehme ich ja die ersten 50 Zeichen plus die Zeichen, die bis zum nächsten Leerzeichen folgen...

Wie kommst du auf die Idee, 50 Zeichen würden für die Breite der Box passen?

Die Idee ist ziemlich absurd: 50 'm' fallen aus dem Rahmen, während 50 'i' ziemlich verloren dastehen.

„Kurzum: Es ist unmöglich, eine für alle Nutzer passende Zahl n zu finden.“ [ELLIPSIS]

Qapla'

[gLan]

Hallo,

noch zu meinem anderen Lösungsansatz:

falls du wirklich 3 Zeilen haben willst:

  
  
$text = "Wieder  
der  
seeehhr  
lange  
Text...";  
  
$vorschau = explode($text, "\r\n");  
echo $vorschau[0].$vorschau[1].$vorschau[2];  
  

gLan

[suit]

falls du wirklich 3 Zeilen haben willst:

$vorschau = explode($text, "\r\n");
echo $vorschau[0].$vorschau[1].$vorschau[2];

Das setzt aber voraus, dass im Text bereits umbrüche mittels \r\n vorliegen. Der OP spricht aber ausdrücklich davon, dass es sich um einen automatischen Zeilenumbruch handelt, der vom Browser ausgeführt wird.