theo chiều dọc & ngang sắp xếp văn bản sau khi luân chuyển CSS

Question

Vì vậy, tôi đang sử dụng CSS để xoay một số văn bản từ ngang để dọc (90 độ) như sau:

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

Vấn đề của tôi là điều này thay đổi các cách văn bản bên ngoài div container. Có một mẹo để giữ nó bên trong container? Có một số điểm neo mà tôi có thể thiết lập? Cách trình duyệt chéo để điều chỉnh bài đăng là gì?

Answer 1

Bạn có thể kéo nó trở lại với một vài thuộc tính CSS ...

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

Ngoài ra, bạn có thể chơi với các transform-origin tài sản:

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

phương pháp thay thế, đó là trình duyệt hơn phù hợp và không cần thông tin về số lượng văn bản trước:

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