DIV mit überbreitem Inhalt: overflow links statt rechts möglich?

[Matthias]

Hallo,

ich habe ein DIV mit fester Größe, darin befindet sich eine überlange Zeile Text. Ich hätte den Text gerne rechtsbündig, so dass der überlange Teil auf der linken Seite des DIVs abgeschnitten wird (overflow hidden), dazu habe ich auch Zeilenumbrüche deaktiviert. Rechtsbündig funktioniert auch, nur sobald der Text eben breiter ist als das DIV, wird der Text rechts aus dem DIV herausgeschoben und nicht links, obwohl ich rechtsbündig eingestellt habe.

Das Problem ist also offenbar, wenn Zeilenumbrüche deaktiviert sind und Text rechtsbündig, dann wird der Text dennoch rechts herausgeschoben und damit quasi linksbündig behandelt.

Gibt es eine Möglichkeit, dass überbreite Elemente auf der linken Seite rausgeschoben werden, statt standardmäßig nach rechts?

Danke schonmal

[Gernot Back]

Hallo Matthias,

Gibt es eine Möglichkeit, dass überbreite Elemente auf der linken Seite rausgeschoben werden, statt standardmäßig nach rechts?

Also: du brauchst zwei ineinander verschachtelte Blockelemente.

Für den IE könntest du mit dem DIR-Attribut was ausrichten, das äußere stellst du auf dir=rtl (right to left, so als ob es sich um arabische Schreibrichtung handelte, im inneren Blockelement stellst du dann wieder auf normale Leserichtung, damit Screenreader nicht durcheinander kommen.

Für den Firefox würde es reichen, nicht nur das äußere, sondern auch das innere Blockelement rechts floaten zu lassen. Das reicht aber nicht für Opera, für den bedarf es eines Margin-Lefts von 100%, was auch bei IE7 und Firefox wirkt, weshalb du für ersteren auf das DIR-Attribut und für letzteren letzteren auch auf das Rechtsfloatenlassen des inneren Blockelements verzichten kannst.

  
<div  style="[code lang=css]float:right;width:10em;overflow:hidden;
~~~">  
   <div style="`white-space:nowrap;text-align:right;margin-left:-100%`{:.language-css}">  
   abc def ghi jkl mno pqr stu vwx yzä öüß  
   </div>  
</div>  
[/code]  
  
Gruß Gernot

[Matthias]

Funktioniert perfekt, vielen Dank!