[phpBB2] (text-)overflow & letter-spacing bei forumlink

Hallo, ihr Lieben!

In meinem Testforum habe ich den hover meiner forenlinks mit ner transition zu einem letter-spacing sozusagen animiert. Soweit klappt das auch, aber wenn ich längere, nicht durch Leerzeichen getrennte Wörter als Forenlink habe, verschiebt das beim mouse-over immer den ganzen Rest der row (wie bei "Beschäftigungstherapie")

Stattdessen hätte ich gerne, dass der Link an sich ganz brav breiter wird, aber nicht die eigentliche Breite seiner Zelle vergrößert, sondern das Wort abgeschnitten und mit text-overflow: ellipsis dann am Ende einfach "..." bekommt.

Hatte es natürlich schon ausprobiert, (auch mit overflow:hidden und fester Breite der Zelle) bin aber schon kläglich gescheitert, er hat es dann einfach ignoriert. Irgendwelche Tipps, wie es auf jeden Fall klappt?

Falls sich das gar nicht machen lässt, wär ich auch damit zufrieden, wenn sich dieser Effekt des Vergrößerns der Zelle und Verkleinern der Nebenzelle dann wenigstens nur auf die entsprechende Zeile auswirken und nicht noch alle anderen Zeilen darunter/darüber betreffen würde. Weil an sich ist es ja ganz witzig.


Liebe Grüße
Zwiebel

Meines Wissens ist das nicht möglich, da es sich um Sonderzeichen "..." handelt und nicht übernommen wird.

Versuche mal die "Beschäftigungstherapie" in "Therapie" zu verkürzen.

Gute Nacht   

Von was genau nicht übernommen? Vom transition?

Und wenn es nur text-overflow: ellipsis wäre, ok, aber text-overflow: clip funktioniert ja z.B. auch nicht. :/

Hallo Zwiebel,

ich finde deine Tabellenaufteilung und wie du in den einzelnen Zellen mit (teils negativem) margin arbeitest, schon nicht ganz optimal...
Aber davon ausgehend lässt sich dein konkretes Problem mit den CSS-Grundlagen erklären:

Ein Link ist ein Inline-Element und kann als solches keinen (text-)overflow besitzen.
Der text-overflow: ellipsis muss außerdem mit einem overflow: hidden verbunden werden.
Und damit beides greift, ist es nötig, dem Element eine max-width zuzuweisen.

All das kannst du so umsetzen:

.forumlink, a.forumlink:link, a.forumlink:visited {
 color: #CE5062;
 display: inline-block;
 font-family: Constantia,Georgia,Times New Roman,serif;
 font-size: 14px;
 font-weight: 400;
 max-width: 190px;
 overflow: hidden;
 text-decoration: none;
 text-overflow: ellipsis;
 text-transform: uppercase;
 transition: all 0.5s ease 0s;
}

Liebe Grüße
Günther

*hüstel* also ich mag meine Tabellenaufteilung! Den negativen margin hatte ich allerdings gestern Abend noch à la 'mal sehen ob's klappt' eingefügt' und war dann begeistert, dass es geklappt hatte... ich nehm die Spielereien das nächste Mal brav vorher raus, wenn ich euch wieder was frag ...sorry! OTL

Und yaaay, Günther~ mein Held in strahlender Rüstung ♥ danke dir trotz nicht-optimaler Tabellenaufteilung für deine Antwort, du weißt immer Bescheid und ich hab auch wieder was gelernt!  

Gerne.
Schönen Sonntag!
-closed-