CSS - div 내부의 긴 연속 텍스트를 오른쪽으로 이동 하시겠습니까?

Question

나는 그것이 차지하는 div 안에 들어 가지 않는 긴 텍스트를 가지고있다. div 클래스는 다음과 같습니다.

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

물론 텍스트 부분 만 볼 수 있습니다. 문제는 첫 번째 N 문자를 표시하고 마지막 N 문자를 표시하려고한다는 것입니다. CSS로 어떻게 구현할 수 있습니까? Text-align 여기 도움이되지 않습니다.

Answer 1

다른 요소에 텍스트를 줄 바꿈 할 수 있다면 this fiddle과 같이 작동하게 할 수 있습니다. 나는 오른쪽에 중첩 된 <span>을 플로팅했습니다.

Answer 2

당신은 사업부에게 오른쪽에있는 모든 방법을 스크롤 자바 스크립트를 사용해야합니다, 시도 :

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

당신은 단지 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> 

(Firefox에서 테스트 됨, YMMV)