div의 오른쪽에 텍스트를 정렬하려면 어떻게해야합니까? 시작 부분이 오버플로로 잘라집니다 : 숨김?

Question

<div style="width:100px; overflow:hidden; text-align:right;" id="pathdiv"> 

<script> 
    document.getElementById("pathdiv").innerHTML="long/path/to/file" 
</script> 

내 목표는 경로의 흥미로운 부분이 표시되도록 시작 부분이 잘리는 방식으로 비교적 좁은 div에서 오른쪽으로 정렬 된 긴 절대 경로를 표시하는 것입니다. 위의 코드는 div에 맞으면 텍스트를 오른쪽 정렬하고, 맞지 않으면 잘라내지만 불행히도 시작 부분이 아니라 끝을 잘라냅니다.

수동으로 너무 길면 문자열을 다듬을 수 있지만 어떻게하면 얼마나 많은 문자가 맞는지 (불분명 함) 계산해야합니다.

(CSS 또는 다른 방법으로) 내 목표를 달성하기위한 직접적인 방법은 무엇입니까?

Answer 1

<div style="width:100px; overflow:hidden; text-align:right;text-overflow:ellipsis; direction:rtl" id="pathdiv"> 
 

 
<script> 
 
    document.getElementById("pathdiv").innerHTML="long/path/to/file" 
 
</script>

추가 방향 (RTL)가 작동합니다.

Answer 2

div 안에 span을 사용하여 position:absolute 및 right:0으로 만들 수 있습니다. 이 경우에는 필요한 것을 얻을 수 있습니다.

document.querySelector("#pathdiv").innerHTML = "very/very/very-long/path/to/file"

#pathdiv { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-align: right; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-items: flex-end; 
 
    white-space: nowrap; 
 
    height: 20px; 
 
}

<div id="pathdiv"> 
 
</div>

: 당신이

document.querySelector("#pathdiv span").innerHTML="very/very/very-long/path/to/file"

#pathdiv { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-align: right; 
 
    position: relative; 
 
} 
 
#pathdiv:before { 
 
content:"A"; /* Hidden character to create the needed space*/ 
 
visibility:hidden; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    white-space:nowrap; /* no needed for path (content) without any spaces*/ 
 
    right: 0; 
 
    top: 0; 
 
}

<div id="pathdiv"> 
 
    <span></span> 
 
</div>

다음

다른 방법은 플렉스 사용하고 추가 기간없이되는 줄 바꿈을 방지하기 위해 컨텐츠에 공간이있을 것이다 경우

white-space:nowrap; 추가