右對齊並將文本旋轉到右邊

美好的一天，我試圖確保在屏幕右側顯示一個帶有文本的圓角矩形。大多數情況下，它運行良好，但是當我將語言切換到俄語時，排列錯誤。英語和其他國際語言（包括阿拉伯語！）正常工作 - 文本始終與右側對齊。有問題的文本是右邊的黃色方框。我很確定它的硬編碼權 - 但我如何確保它堅持正確？浮動：對，文本對齊：右不起作用右對齊並將文本旋轉到右邊

感謝（請點擊圖片查看英語和俄語之間的動畫）

對齊代碼：

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

右對齊並將文本旋轉到右邊

回答

相關問題