verticalmente y horizontalmente alinear el texto después de la rotación de CSS

Question

Así que estoy usando CSS para rotar un texto de horizontal a vertical (90 grados), así:

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

Mi problema es que esto cambia la forma en que el texto fuera del el contenedor div. ¿Hay algún truco para mantenerlo dentro del contenedor? ¿Hay algún punto de anclaje que pueda establecer? ¿Qué es una forma de navegador cruzada para ajustar la publicación?

Answer 1

Se podría tirar de ella con unas pocas propiedades CSS ...

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

Como alternativa, puede jugar con la propiedad 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

método alternativo, que es más compatible con el navegador y no necesita información sobre la cantidad de texto de antemano:

.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/