Aligner à droite avec « mode d'écriture:-lr verticale » dans un conteneur à largeur fixe

Question

Je ne peux pas obtenir le div (boîte verte) texte collé sur le droit du conteneur div (boîte rouge). La largeur du conteneur est fixe et writing-mode: vertical-lr; est utilisé. J'ai essayé beaucoup de choses avec vertical-align et text-align.

div.container { 
 
    writing-mode: vertical-lr; 
 
    border: 2px solid red; 
 
    padding: 2px; 
 
    width: 70px; 
 
} 
 
div.text { 
 
    border: 2px solid green; 
 
    transform: rotate(180deg); 
 
}

<div class="container"> 
 
    <div class="text">I want to touch the right border of the container!</div> 
 
</div>

Answer 1

Je ne sais pas qu'il va résoudre votre senario exacte. vous pouvez utiliser translateX proprty. si vous voulez une valeur X générique calculer en utilisant calc

comme transform: translateX (calc (100% - 50px)); * 50px moitié de la taille de la largeur du texte

div.container { 
 
    writing-mode: vertical-lr; 
 
    border: 2px solid red; 
 
    padding: 2px; 
 
    width: 70px; 
 
} 
 
div.text { 
 
    border: 2px solid green; 
 
    transform:translateX(36%) rotate(180deg); 
 
}

<div class="container"> 
 
    <div class="text">I want to touch the right border of the container!</div> 
 
</div>

Answer 2

Je ne sais pas si cela va fonctionner, mais vous pouvez essayer float: right, peut-être en combinaison avec le texte-align: right . J'ai eu quelques problèmes pour aligner du texte moi-même et cela m'a aidé.

Answer 3

je pourrais avoir mal compris une partie de la question, mais si vous utilisez-rl vertical, il semble faire ce que vous recherchez (il fait la dernière ligne se tenir debout sur le côté droit):

div.container { 
 
    writing-mode: vertical-rl; 
 
    border: 2px solid red; 
 
    padding: 2px; 
 
    width: 70px; 
 
} 
 
div.text { 
 
    border: 2px solid green; 
 
    transform: rotate(180deg); 
 
}

<div class="container"> 
 
    <div class="text">I want to touch the right border of the container!</div> 
 
</div>

Sinon, que diriez-vous d'appliquer le mode écriture à l'enfant et à tout affichage. exemple ci-dessous avec flex

div.container { 
 
    border: 2px solid red; 
 
    padding: 2px; 
 
    width: 70px; 
 
    display:flex; 
 
    justify-content:flex-end 
 
} 
 
div.text { 
 
    writing-mode: vertical-lr;/* or vertical-rl*/ 
 
    border: 2px solid green; 
 
    transform: rotate(180deg); 
 
}

<div class="container"> 
 
    <div class="text">I want to touch the right border of the container!</div> 
 
</div>