nicht angemeldet
String mit ... begrenzen
Hallo,
ich schreibe einen String in ein Div-Element.
<div style="position: absolute; top: 19px; left: 0px; width: 166px; height: 48px; overflow: hidden;">
Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat / Spaghetti mit Hackfleischbällchen in Tomatensugo / Pizza mit Salami und Paprika
</div>
Da der Text zur kompletten Anzeigen zu lang ist, wird mit overflow: hidden der restliche Text versteckt.
Nun möchte ich, dass mir in der letzen sichtbaren Zeile (Zeile 4) beim letzen Wort ... angehängt werden, damit deutlich wird, dass mehr Text steht als angezeigt.
Also für das Beispiel:
Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat / Spaghetti mit Hackfleischbällchen in...
Wie kann ich das machen? Ist das Problem verständlich? Oder muss ich einen anderen Ansatz anwenden?
Die Texte sind sehr unterschiedlich in der Länge...
Danke für Hilfe,
gondor(..)
-
Servus,
es wird in CSS3 die Eigenschaft text-overflow geben, die mit dem Wert 'ellipsis' oder besser 'ellipsis-word' genau das macht, was du wünscht.
Der Internet Explorer versteht text-overflow ab Version 6 (evtl. auch früher), Opera mittels -o-text-overflow, Geckos AFAIK noch nicht (evtl. ließe sich da was mittels :after machen, nie probiert); bei anderen Browsern hab ich keine Ahnung (Google hilft da bestimmt ;)
Alternativ ließe sich noch Serverseitig oder mittels Javascript der Text 'von Hand' auf eine geschätzte Maximallänge kürzen und Ellipse anhängen.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|-
Hi Patrick,
danke für Deine schnelle Antwort. Ich habe das Div entsprechend angepasst. Weder mit
<div style="position: absolute; top: 19px; left: 0px; width: 166px; height: 48px; overflow: hidden; text-overflow: ellipsis;">
Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat / Spaghetti mit Hackfleischbällchen in Tomatensugo / Pizza mit Salami und Paprika
</div>noch
<div style="position: absolute; top: 19px; left: 0px; width: 166px; height: 48px; overflow: hidden; text-overflow: ellipsis-word;">
Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat / Spaghetti mit Hackfleischbällchen in Tomatensugo / Pizza mit Salami und Paprika
</div>zeigen im FF sowie IE keine Veränderungen.
Was st falsch?
gondor(..)
-
-
Hallo,
wie schreibst Du denn die Texte in die html-Files? Statisch? Dann würde ich auch statische ... verwenden.
Benutzt Du Smarty? Dann hilft Dir {$TEXT|truncate:30:"..."} (o.ä.)
Benutzt Du php? Dann soltlest Du Dir eine abbreviate-Funktion basteln, Stichwort substr/strlen...
Gruß,
Manu--
Deutschland ist einfach von einer Diktatur der Nationalsozialisten zu einer Diktatur der Gutmenschen übergegangen. -
Moin!
ich schreibe einen String in ein Div-Element.
<div style="position: absolute; top: 19px; left: 0px; width: 166px; height: 48px; overflow: hidden;">
Tableau italienische Küche: Tomaten - Mozzarella - Avocado - Salat / Spaghetti mit Hackfleischbällchen in Tomatensugo / Pizza mit Salami und Paprika
</div>Da der Text zur kompletten Anzeigen zu lang ist, wird mit overflow: hidden der restliche Text versteckt.
Aber auch nur so halbwegs. Das Verstecken funktioniert _bei dir_ gut, weil die Schriftart, Schriftgröße und der Zeilenabstand offenbar Teiler der angegebenen Höhe von 48px des DIVs sind, die fünfte Zeile also vollständig außerhalb des sichtbaren Bereichs lagert.
Konstruier' dir einfach mal eine Situation, in der das nicht der Fall ist, z.B. weil der Browsernutzer eine Mindestschriftgröße eingestellt hat. Schon stimmt deine Zeilenhöhe nicht mehr, und der Text wird mittendrin abgeschnitten.
Wie kann ich das machen? Ist das Problem verständlich? Oder muss ich einen anderen Ansatz anwenden?
Ich plädiere für einen anderen Ansatz. Schreibe nur soviel Text ins DIV, wie reinpasst und auch nur reinpassen soll. Wenn du siehst, dass zuviel Text drinsteht, kürze den Text. Wenn du ihn kürzt, hänge "..." bzw. noch schöner das Zeichen "horizontale Ellipse" (als Entity …, als Zeichen …).
- Sven Rautenberg
--
"Love your nation - respect the others."-
Hallo Sven,
Ich plädiere für einen anderen Ansatz. Schreibe nur soviel Text ins DIV, wie reinpasst und auch nur reinpassen soll. Wenn du siehst, dass zuviel Text drinsteht, kürze den Text. Wenn du ihn kürzt, hänge "..." bzw. noch schöner das Zeichen "horizontale Ellipse" (als Entity …, als Zeichen …).
aber woher soll ich wissen, ab welchen Zeichen der Text zu lang ist?
bzw. wann der Text abgeschitten werden soll?
Ich möchte natürlich, dass mir soviel Text gegeben wird, wie in dem Div passen soll.
Kannst Du mir noch einmal Rat geben?
gondor(..)
-
Moin!
aber woher soll ich wissen, ab welchen Zeichen der Text zu lang ist?
Und woher soll ich wissen, was bei dir als "zu lang" gilt?
bzw. wann der Text abgeschitten werden soll?
Ich möchte natürlich, dass mir soviel Text gegeben wird, wie in dem Div passen soll.
Wie kriegt man denn eigentlich den zu langen Text angezeigt? Gar nicht? Dann schneidest du einfach den Text so kurz ab, dass selbst die längste Form dort reinpaßt.
- Sven Rautenberg
--
"Love your nation - respect the others."
-
-
-
Nun möchte ich, dass mir in der letzen sichtbaren Zeile (Zeile 4) beim letzen Wort ... angehängt werden, damit deutlich wird, dass mehr Text steht als angezeigt.
Nichts leichter als das. Verwende PHP, Packe den Text in eine Variable und ermittle mit strlen die Länge des Textes. Falls der Text über eine von dir festgelegte Zeichenanzahl hinausreicht, kürzt du ihn mit substr und machst drei Punkte dahinter. Fertig.
Gruß
christian