text-overflow ellipses

[Steffen]

Hallo,

ich habe mir gestern wieder mal CSS "text-overflow" angeschaut.

Was ich im Moment nicht weiß wie es geht oder gehen könnte; wie kann ich "text-overflow: ellipses" so anwenden, dass wenn die ellipsis angezeigt werden, dass ich dann ein title-Attribute mit dem vollen Text erhalte?

* voller Text sichtbar -> kein title-Attribut enthält den vollen Text
* Text abgeschnitten -> title-Attribut

Grüße

• Steffen

[Gunther]

Hallo!

Was ich im Moment nicht weiß wie es geht oder gehen könnte; wie kann ich "text-overflow: ellipses" so anwenden, dass wenn die ellipsis angezeigt werden, dass ich dann ein title-Attribute mit dem vollen Text erhalte?

* voller Text sichtbar -> kein title-Attribut enthält den vollen Text
* Text abgeschnitten -> title-Attribut

Was hat das jetzt mit einem title-Attribut zu tun!?

Du hast dir das Beispiel mal angeguckt?

Ansonsten poste bitte mal ein Beispiel_mit_HTML_und_CSS Code.

Gruß Gunther

[Steffen]

Hi,

ich habe kein Beispiel, da ich noch in der Theoriephase bin.

Mir geht es darum, dass wenn die ellipsis aktiv werden, dann wird ja Text abgeschnitten, d.h. Information geht "verloren".

Somit war die Idee, dass der vollständige Text bei "onmouseover" angezeigt wird. Dafür kann man ja das title-Attribut benutzen.

Dafür suche ich eine Lösung.

Natürlich könnte man das title-Attribut immer setzen, aber das empfinde ich als unschön. Die "mouseover"-Info soll nur bei aktiven ellipsis angezeigt werden.

Grüße

• Steffen

[Gunther]

Hi,

Mir geht es darum, dass wenn die ellipsis aktiv werden, dann wird ja Text abgeschnitten, d.h. Information geht "verloren".

Somit war die Idee, dass der vollständige Text bei "onmouseover" angezeigt wird. Dafür kann man ja das title-Attribut benutzen.

Dafür suche ich eine Lösung.

ah, dann bist du aber zumindest schon mal im falschen Themenbereich gelandet, denn was du suchst, lässt sich per CSS nicht erreichen, sondern wenn dann mit Javascript.

Natürlich könnte man das title-Attribut immer setzen, aber das empfinde ich als unschön. Die "mouseover"-Info soll nur bei aktiven ellipsis angezeigt werden.

Sorry, aber ich finde die ganze Idee ansich schon "unschön". ;-)
Die erste Frage ist doch, warum soll Text überhaupt abgeschnitten werden?
Und wenn, stellt sich mir als nächstes die Frage, ob es dann "sinnvoll" ist, den ganzen Text in ein nicht stylebares Title-Attribut zu packen, dessen Anzeige sowieso nur auf Geräten mit Maus-Bedienung funktioniert und auch nur dann erscheint, wenn der User das betreffende Element hovert.

Hinzukommt, dass ich das als "zweckentfremdung" des ohnehin "fragwürdigen" Title-Attributs ansehe - wenn überhaupt dann schon eher das (HTML5) Data-Attribut. Aber am ehesten weder noch, sondern eine aus Usability Sicht "vernünftige" Lösung.

Gruß Gunther

[Der Martin]

Hallo,

Somit war die Idee, dass der vollständige Text bei "onmouseover" angezeigt wird. Dafür kann man ja das title-Attribut benutzen.
ah, dann bist du aber zumindest schon mal im falschen Themenbereich gelandet, denn was du suchst, lässt sich per CSS nicht erreichen, sondern wenn dann mit Javascript.

vermutlich, ja.

Natürlich könnte man das title-Attribut immer setzen, aber das empfinde ich als unschön. Die "mouseover"-Info soll nur bei aktiven ellipsis angezeigt werden.
Sorry, aber ich finde die ganze Idee ansich schon "unschön". ;-)

Ob man das "schön" findet, bleibt jedem selbst überlassen. Fakt ist aber, dass Windows-User dieses Verhalten durch ihr GUI seit 18 Jahren (nämlich seit Windows 95) gewöhnt sein dürften. Ja, auch ich fand es in all den Jahren zumindest praktisch (wenn auch nicht schön), dass Dateinamen durch Hovern in voller Länge angezeigt wurden, die aufgrund sehr schmaler Spalten im Explorer nicht komplett dargestellt werden können. Gefällt mir auf jeden Fall wesentlich besser, als wenn die Spaltenbreite automatisch vergrößert wird. Das mag ich nämlich gar nicht; die Spaltenbreite stelle ich mir einmal nach meinen Wünschen ein und hätte gern, dass sie dann fest bleibt.

Die erste Frage ist doch, warum soll Text überhaupt abgeschnitten werden?

Diese Frage sollte man sich je nach Anwendungsfall stellen. In Tabellen oder tabellenähnlichen Darstellungen finde ich ein solches Feature durchaus nützlich. Allerdings -und da stimme ich dir vollkommen zu- wäre es dann wünschenswert, wenn der Tooltipp mit dem ungekürzten Text dann zumindest in der gleichen Schriftart und -größe dargestellt wird wie der gekürzte Text. Das ist mit einem durch ein title-Attribut erzeugten Tooltipp nicht zu machen.

[...] sondern eine aus Usability Sicht "vernünftige" Lösung.

Was wäre denn deiner Ansicht nach eine vernüftige Lösung?

Ciao,
 Martin

[Gunther]

Hallo,

[...] sondern eine aus Usability Sicht "vernünftige" Lösung.

Was wäre denn deiner Ansicht nach eine vernüftige Lösung?

So etwas hier zum Beispiel, oder eines der anderen Tooltip Plugins (für jQuery).

Gruß Gunther

[Steffen]

Hallo,

ich war möglichst auf der Suche nach einer nativen Lösung, wenn halt möglich mit CSS.

Beim Lesen Eurer Antworten ist mir eine Idee gekommen, die für meinen Fall gut funktioniert und rein auf CSS basiert.

  
.unwrapable {  
    white-space: nowrap;  
    text-overflow: ellipsis;  
    overflow: hidden;  
}  
.unwrapable:hover {  
    text-overflow: inherit;  
    overflow: visible;  
}  

Ich deaktiviere einfach die Ellipsis "onmouseover" und zeige den Text an.

Es muss jetzt natürlich jeder für sich selbst entscheiden, ob und wie das passt. Außerdem kann man ja den :hover-Style noch je nach Bedarf gestalten. (Stichwort: position, z-index, background, ...)

Grüße

• Steffen

[Steffen]

Hi,

ah, dann bist du aber zumindest schon mal im falschen Themenbereich gelandet, denn was du suchst, lässt sich per CSS nicht erreichen, sondern wenn dann mit Javascript.

das ist jetzt schon ein bisschen kleinlich ... für mich war es ein Problem mit CSS.

Die erste Frage ist doch, warum soll Text überhaupt abgeschnitten werden?

Gegenfrage: Wozu ist dieser Style da, wenn nicht um angewandt zu werden. Es muss folglich ein Problem gegeben haben, was man versucht hat mit diesem Style zu lösen.

Und wenn, stellt sich mir als nächstes die Frage, ob es dann "sinnvoll" ist, den ganzen Text in ein nicht stylebares Title-Attribut zu packen, dessen Anzeige sowieso nur auf Geräten mit Maus-Bedienung funktioniert und auch nur dann erscheint, wenn der User das betreffende Element hovert.

Für meinen Anwendungsfall, ja.

Um solchen vom Thema abweichenden Diskussionen auszuweichen habe ich die Frage bewusst recht allgemein gestellt und nicht mit einem Beispiel versehen.

Grüße

• Steffen

[Matthias Apsel]

Om nah hoo pez nyeetz, Steffen!

Die erste Frage ist doch, warum soll Text überhaupt abgeschnitten werden?

Gegenfrage: Wozu ist dieser Style da, wenn nicht um angewandt zu werden. Es muss folglich ein Problem gegeben haben, was man versucht hat mit diesem Style zu lösen.

Wenn der Text wichtig ist, schneidet man ihn nicht ab. Dann braucht er auch nicht ins title-Attribut.

Wenn der Text unwichtig ist, kann man ihn abschneiden. Dann braucht er nicht ins title-Attribut.

Gedacht ist dieser Style beispielsweise für einen Vorschautext eines Artikels, der ein Element,  
bestimmter Größe vollständig ausfüllen soll und auf den Artikel weiterleitet. Eine andere Mög…

Matthias