"방향"이 "rtl"로 설정된 경우 "텍스트 오버플로"를 사용해야합니다.

Question

텍스트 앞에 "..."을 입력하고 div를 채울 때 마지막 부분 만 표시해야합니다.

은 사용하지 않고, CSS는에 의해 할 수 있나요 : http://jsfiddle.net/CBUH4/5/ 여기

내가해야 할 것입니다 : 그것은 정상시

그리고 여기에

<span class="file-upload-status" style="max-width:200px"> 
    C:\fakepath\996571_1398802860346752_2094565473_n.jpg 
</span> 
<br/> 
<span class="file-upload-status" style="max-width:200px"> 
    C:\fakepath\1.jpg 
</span> 

내가 무엇을 가지고 아무것도하지 않고 JavaScript 또는 jQuery. 이 같은

Answer 1

아마 뭔가 : http://jsfiddle.net/CBUH4/8/

white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 

Answer 2

이 난 그냥 CSS를 사용하여 가지고 할 수있는 가장 가까운 솔루션입니다. 여전히 span 엘리먼트의 폭과 거의 같은 복수의 .을 사용할 필요가 있다는 단점이 있습니다.

Fiddle

HTML

<span class="file-upload-status ellipsis" style="max-width:200px"> 
    C:\fakepath\996571_1398802860346752_2094565473_n.jpg 
</span> 

<br/> 
<span class="file-upload-status" style="max-width:200px"> 
    C:\fakepath\1.jpg 
</span> 

CSS

.file-upload-status { 
    font-weight: bold; 
    font-size: 16px; 
    color: #888; 
    background: #fff; 
    border-radius: 7px; 
    height: 27px; 
    border: 1px solid #ccc; 
    padding-left: 5px; 
    padding-right: 5px; 
    white-space: nowrap; 
    overflow: hidden; 
    direction: rtl; 
    display:inline-block; 
    width: 200px; 
    position: relative; 
} 
.file-upload-status:after { 
    content:"................................."; 
    color: white; 
    position: relative; 
    background-color: white; 
    z-index: 2; 
} 
.file-upload-status:before { 
    content:"..."; 
    position:absolute; 
    background-color: white; 
    left: 0px; 
    top: 0px; 
    z-index: 1; 
} 

제안 : D

: 가능한 한 많은 점을 부여3210