CSS - Maj long texte continu à l'intérieur de la div vers la droite?

Question

J'ai un long texte qui ne rentre pas dans le div qu'il occupe. La classe div est la suivante:

.mydiv { 
    overflow:hidden; 
    padding:3px 3px 3px 5px; 
    white-space:nowrap; 
} 

Bien sûr, je ne peux voir qu'une partie du texte. Le problème est qu'il montre les N premiers caractères et je veux montrer les derniers N caractères. Comment puis-je l'obtenir avec CSS? Text-align n'aide pas ici.

Answer 1

Si vous pouvez envelopper votre texte dans un autre élément, vous pouvez le faire fonctionner comme indiqué dans this fiddle. J'ai flotté un <span> imbriqué à droite.

Answer 2

Vous devez utiliser javascript pour faire défiler la div tout le chemin à droite, essayez:

var obj = document.getElementById("div-id"); 
obj.scrollLeft = obj.scrollWidth - obj.clientWidth 

Answer 3

<div class="wrap"> 
    <div class="window">Lots of text</div> 
</div> 

.wrap { overflow: hidden; position: relative; } 
.window { position: absolute; right: 0px; } 

Answer 4

Vous pouvez le faire avec juste CSS:

http://jsbin.com/ususu

<div style="width: 150px; border: 1px solid red; overflow: hidden; position: relative; height: 2em;"> 
     <div style="position: absolute; right: 0px; padding: .5em;white-space:nowrap;"> 
    aaaaaaaaaaaabbbbbbbbbcccccccccccccccccddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeffffffffffffffffffffgggggggggggggggggggghhhhhhhhhhhhhhhhiiiiiiiiiiiii 
    </div> 
    </div> 

(testé dans Firefox, YMMV)