nicht angemeldet
Überlangen Text rechtsbündig anzeigen
0 0 0 
Der Martin
Überlangen Text rechtsbündig anzeigen
Matthias Apsel
Gunnar Bittersmann[latex]Mae govannen![/latex]
Ich stehe vor folgendem Problem: Ich möchte in einem Element überlangen Text so anzeigen, daß das Ende des Textes immer sichtbar ist und der Text notfalls links abgeschnitten wird.
Gut, habe ich mir gedacht, direction ist hier die Wahl. Funktioniert auch. Meistens jedenfalls. Außer am Textende steht ein Satzzeichen, eine Klammer oder diverse andere Zeichen. Dann wird dieses letzte Zeichen nach links verfrachtet.
Ich habe das mal anhand eines Beispieles verdeutlicht
http://jsfiddle.net/vbDwM/4/
Ideen?
Stur lächeln und winken, Männer!
Kai
--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet
-
مرحبا
Ich habe das mal anhand eines Beispieles verdeutlicht
http://jsfiddle.net/vbDwM/4/Ideen?
Ist das eine Fangfrage?
mfg
-
[latex]Mae govannen![/latex]
Ist das eine Fangfrage?
Nö, nur irgendwie Chaos mit den URLs. Keine Ahnung, was da passiert is, vielleicht hab ich mal wieder die falsche tastenkombination gedrückt ...
Stur lächeln und winken, Männer!
Kai--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet
-
-
[latex]Mae govannen![/latex]
Was sich nicht gesagt (und auch im Beispiel nicht beachtet) habe ist, daß der Text wenn er kürzer ist als das Feld *linksbündig* angezeigt werden soll, aber eben nur der rechte Teil angezeigt wird, wenn länger
Ich habe das mal anhand eines Beispieles verdeutlicht
Hoffentlich jetzt mit korrekter URL
Stur lächeln und winken, Männer!
Kai--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet-
Om nah hoo pez nyeetz, Kai345!
Was sich nicht gesagt (und auch im Beispiel nicht beachtet) habe ist, daß der Text wenn er kürzer ist als das Feld *linksbündig* angezeigt werden soll, aber eben nur der rechte Teil angezeigt wird, wenn länger
Nur für die zweite Variante (also links abschneiden) hilft absolute Positionierung eines zusätzlichen Span-Elementes.
Den Vergleich der Längen der Elemente bekommt man sicher mit Javascript gelöst.
keine _schöne_ Lösung - ich weiß
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Kai345!
Schönere Lösung, kommt ohne JS aus, verwendet aber ein zusätzliches Element:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Überlanger Text</title> <style type="text/css"> div.foo { width: 14em; border: 1px solid; height: 1.4em; padding: 0.25em; overflow: hidden; white-space: nowrap; position: relative; text-align: right; margin-bottom: 1em; } div.foo > div { position: absolute; min-width: 14em; right: 0.25em; text-align: left; } </style> </head> <body> <div class="foo"> <div>Ganz langer Text, der abgeschnitten werden soll.</div> </div> <div class="foo"> <div>Ganz kurzer Text.</div> </div> </body> </html>Matthias
--
1/z ist kein Blatt Papier.
-
[latex]Mae govannen![/latex]
Schönere Lösung, kommt ohne JS aus, verwendet aber ein zusätzliches Element:
Das wäre kein Thema, da die Elemente, die den Text enthalten in Wirklichkeit ohnehin innerhalb einer UL liegen, ich könnte daher die LI-Elemente als "äußere Elemente" stylen. Wenn ich wieder an meinem Haupt-Computer bin, werde ich die Lösung mal testen, diese Kiste hier ist nicht geeignet.
Erstmal „danke“ an dich und auch an alle Anderen.
Stur lächeln und winken, Männer!
Kai--
It all began when I went on a tour, hoping to find some furniture
Followed a sign saying "Beautiful Chest", led to a lady who showed me her best)
SelfHTML-Forum-Stylesheet-
Om nah hoo pez nyeetz, Kai345!
Mit einer Verwendung von border und outline ließe sich bei einfarbigem Hintergrund sogar ein padding simulieren.
Matthias
--
1/z ist kein Blatt Papier.
-
-
@@Matthias Apsel:
nuqneH
Schönere Lösung, kommt ohne JS aus, verwendet aber ein zusätzliches Element:
Da hätte ich dann auch noch eine anzubieten, die sogar ein Auslassungszeichen setzt: http://dabblet.com/gist/2911728
Funktioniert allerdings nur im Firefox richtig. Das hat schon seinen Grund, warum 'text-overflow' noch nicht in der Spec steht, IIRC wegen des ungeklärten Verhaltens bei Bidi-Text.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
mit der Richtung hatte ich auch experimentiert. Allerdings führte
div.foo {direction: rtl} div.foo > div {direction: ltr}nicht zum gewünschten Ziel, sprich die Textrichtung ließ sich nicht wieder umstellen.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
Lieber Kai345,
da habe ich ein zusätzliches <div> zum Ausprobieren angefügt:
<div id="fr"> <span>Wollen doch mal sehen, was mit position:absolute zu machen ist, wenn das Teil zu lang wird.</span> </div>Mit folgendem CSS scheint das genau das zu tun, was Du möchtest:
#fr { position: relative; } #fr span { position: absolute; right: 0; }Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Ingrid,
da habe ich ein zusätzliches <div> zum Ausprobieren angefügt:
Mist, er hat's nicht dauerhaft gespeichert.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
Om nah hoo pez nyeetz, Felix Riesterer!
Mit dieser Variante werden aber nur die überlangen wunschgemäß dargestellt.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
Hallo,
Ich stehe vor folgendem Problem: Ich möchte in einem Element überlangen Text so anzeigen, daß das Ende des Textes immer sichtbar ist und der Text notfalls links abgeschnitten wird.
mal so auf die Schnelle und ins Unreine gedacht:
<div> <p>Dieser Text soll linksbündig stehen, wenn er kurz ist; rechtsbündig und links abgeschnitten, wenn er sehr lang ist.</p> </div>Stylesheet:
div { position: relative; width: 1.25em; overflow: hidden; border: 1px solid #CCF; } div#justify p { white-space: pre; position: absolute; right: 0; min-width: 100%; padding: 0; margin: 0; }Leistet bei mir in den aktuellen Versionen von Opera und FF das Gewünschte (IE und Chrome gerade nicht bereit). Die festen Maße für den Container finde ich nicht schön, aber der sonst so elegante overflow-Trick reißt's hier nicht. Vielleicht kannst du das ja als Start für weitere Experimente nehmen ...
Gut, habe ich mir gedacht,
directionist hier die Wahl.Auf die Idee wäre ich vermutlich nicht gekommen.
Schönes Wochenende,
Martin--
TEAM: Toll, Ein Anderer Macht's.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(