WebDevTeam’s Blog

Web Development, JavaScript, CSS, Ajax, Web2.0, Usability, Interaction, Tools

Text-Overflow – worauf wir alle gewartet haben

with 7 comments

Wie oft schon haben wir Kniffe in in den verschiedensten Programmiersprachen umgesetzt um irgendwelche Langtexte so einzukürzen, dass sie in das vorgegebene Layout passen ohne nur halbe Buchstaben oder Worte sichtbar zu lassen?

In CSS3 gibt es dafür die eigenschaft text-overflow, die für Blocklevel-Elemente festlegt was passieren soll wenn der text heraus läuft. Mit der Value „elipsis“ oder „elipsis-word“ kann festgelegt werden, dass so gekürzt wird, dass am Ende der Box ein „…“ zeigt – da ist noch mehr Text!

Was wäre es für eine wunderbare Welt wenn das in jedem Browser funktionieren würde? Denn leider schaffen das nicht alle. Diesmal ist nicht der IE das Problem, sondern -bitte hinsetzen und tief durchathmen- der Firefox.

jQuery to the rescue!
Ein neues jQuery-plugin ermöglicht nun wenigstens das Kürzen auf Zeichenebene und ich denke bis das auch für Wörter erweitert wurde wird es nicht mehr lange dauern.

Zwar ist das auch wieder nur eine Lösung in einer weiteren Sprache nämlich JS aber bedenkt die Möglichkeiten!
Für den Start bekommen Elemente für die das Feature gebraucht wird eine class=“textOverflow“. Das CSS wird nach bestem Wissen dafür umgesetzt und ab IE funktionierts. Die übrigen Browser bekommen die Eigenschaft über das Plugin untergeschoben.
Da nun aber Nutzer von FF, WebKit etc ohnehin mit hoher Frequenz aktualisieren, können wir das JS Workaround dann später entfernen wenn unsere Lieblingsbrowser nachgezogen haben.

Advertisements

Written by StilgarBF

April 7, 2009 um 8:04 pm

Veröffentlicht in Uncategorized

Tagged with , , , , ,

7 Antworten

Subscribe to comments with RSS.

  1. Hehe, das habe ich gestern auch gelesen: http://ajaxian.com/archives/text-overflow-for-firefox-via-jquery.

    webdevteam

    April 8, 2009 at 2:00 pm

  2. jep, da habe ichs auch her – habe hier dann die tatsächlichen quellen verlinkt und nur einen Pingback zu ajaxian gesetzt:-)

    stilgarbf

    April 8, 2009 at 2:42 pm

  3. „nur einen Pingback zu ajaxian gesetzt“? Habe mal kurz Google bemüht, aber was macht das, weil ich hier nichts zu ajaxian finde. *duckundweg*

    webdevteam

    April 8, 2009 at 8:30 pm

  4. stimmt – macht wenig sinn. – da haben sich denken und Handeln etwas überschnitten. – den Trackback hatte ich als ersten eingetragen und dann weiter recherchiert.
    Der Trackback wurde bei Ajaxian ohnehin nicht angezeigt.

    stilgarbf

    April 8, 2009 at 8:50 pm

  5. […] Text-Overflow – worauf wir alle gewartet haben […]

  6. Wenn ich im eigenen Blog auf einen Artikel verlinke, wird dies in dem verlinkten Artikel als Kommentar angezeigt… interessant.

    webdevteam

    April 8, 2009 at 9:09 pm

  7. dann, wenn du den anderen Blog (normalerweise die Quelle) unten bei Trackback angiebst.
    das ganze wirkt als multiplikator und beide Seiten profitieren. Die Quelle wird verlinkt und der der was drüber schreibt taucht normalerweise auf der Quellseite auf. – gewöhnlich unten bei den Kommentaren.

    stilgarbf

    April 8, 2009 at 10:54 pm


Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: