html - 右对齐文本并将其旋转到右边缘

Question

美好的一天，我正在尝试确保在屏幕右侧显示一个带有一些文本的圆 Angular 矩形。在大多数情况下，它运行良好，但当我将语言切换为俄语时，对齐出现问题。英语和其他国际语言(包括阿拉伯语!)工作正常 - 文本始终右对齐。有问题的文本是右边的黄色框。我很确定它是我硬编码的权利 - 但我如何确保它坚持正确？ float:right, text-align:right 不起作用

谢谢(请点击图片查看英俄动画)

对齐代码:

CSS:

.bwmode {
    position: absolute;
    top: 30%;
    right: -28px;
    opacity: 0.7;
    background-color: #f1c40f;
    color: #000;
    font-size: 11px;
    border-radius: 0px 0px 5px 5px;
    z-index: 99999;
    padding-left: 3px;
    padding-right: 3px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

HTML

<div class="bwmode" ng-if="$root.runMode=='lowbw'">
            <span translate="kLowBWDisplay"></span>
</div>

Answer 1

我认为这是最简单的方法。 Fiddle

  p{
      writing-mode: vertical-lr;
      position: absolute;
       top: 50%;
       transform: translateY(-50%:);
       right: 0;
    }