लंबवत और क्षैतिज सीएसएस रोटेशन के बाद पाठ संरेखित

Question

तो मैं तो जैसे खड़ी (90 डिग्री) क्षैतिज से कुछ पाठ को घुमाने के लिए सीएसएस का उपयोग कर रहा:

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

मेरे समस्या यह है कि इस के बाहर पाठ रास्ता बदलाव है कंटेनर div। क्या कंटेनर के अंदर रखने के लिए कोई चाल है? क्या कुछ एंकर पॉइंट है जिसे मैं सेट कर सकता हूं? पोस्ट समायोजित करने के लिए एक क्रॉस ब्राउज़र तरीका क्या है?

Answer 1

आप कुछ सीएसएस गुणों के साथ इसे वापस खींच सकता है ...

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