右对齐并将文本旋转到右边

美好的一天，我试图确保在屏幕右侧显示一个带有文本的圆角矩形。大多数情况下，它运行良好，但是当我将语言切换到俄语时，排列错误。英语和其他国际语言（包括阿拉伯语！）正常工作 - 文本始终与右侧对齐。有问题的文本是右边的黄色方框。我很确定它的硬编码权 - 但我如何确保它坚持正确？浮动：对，文本对齐：右不起作用右对齐并将文本旋转到右边

感谢（请点击图片查看英语和俄语之间的动画）

对齐代码：

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>

来源

2016-11-10 user1361529

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

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

来源

2016-11-10 01:08:11

天才！什么是写模式！但在桌面上运行良好 - 我将在明天尝试移动设备，如果它能正常工作，我会接受它。 – user1361529

这不幸的是不适用于手机（写作模式：vertical-lr） - 刚刚在iOS 10中试过。还有其他想法吗？还尝试了-webkit-writing-mode：vertical-lr – user1361529

oops抱歉 - 它在添加'-webkit-writing-mode'之后起作用！ – user1361529

右对齐并将文本旋转到右边

回答

相关问题