Вертикально и горизонтально выровнять текст после поворота CSS

Question

Поэтому я использую CSS, чтобы повернуть текст от горизонтального до вертикального (90 градусов), как так:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
writing-mode: tb-rl; 
filter: flipv fliph; 

Моя проблема заключается в том, что это сдвигает текст путь за пределами контейнер div. Есть ли уловка, чтобы держать ее внутри контейнера? Есть ли какая-то опорная точка, которую я мог бы установить? Что такое кросс-браузерный способ настройки сообщения?

Answer 1

Вы могли бы вытащить его обратно в с несколькими CSS свойствами ...

#whatever { 
    position: relative; 
    top: -4px; 
    right: -10px; 
} 

В качестве альтернативы, вы можете играть с transform-origin собственности:

transform: rotate(-90deg); 
transform-origin:20% 40%; 
-ms-transform: rotate(-90deg); /* IE 9 */ 
-ms-transform-origin:20% 40%; /* IE 9 */ 
-webkit-transform: rotate(-90deg); /* Safari and Chrome */ 
-webkit-transform-origin:20% 40%; /* Safari and Chrome */ 
-moz-transform: rotate(-90deg); /* Firefox */ 
-moz-transform-origin:20% 40%; /* Firefox */ 
-o-transform: rotate(-90deg); /* Opera */ 
-o-transform-origin:20% 40%; /* Opera */ 

Answer 2

Альтернативный метод, который является более браузерами и не нуждается в информации о количестве текста заблаговременно:

.disclaimer { 
    position: absolute; 
    right: 10px; 
    bottom: 10px; 
    font-size: 12px; 
    transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    line-height: 15px; 
    height: 15px; 
    width: 15px; 
    overflow: visible; 
    white-space: nowrap; 
} 

http://jsfiddle.net/d29cmkej/