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内のスパンを使用してposition:absoluteとright:0にすることができます。この場合、必要なものを手に入れることができます。

あなたはここで改行

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;を追加するには、フレックスを使用してスパンを追加することなく、別の方法である：

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>