otaczający transformowany element z DIV

Question

Chciałbym obrócić element tekstowy w DIV, jednak po obróceniu tekstu mój div zwija się tak, jakby był pusty. Czy istnieje sztuczka CSS, aby mój DIV nadal otaczał mój wewnętrzny element?

tutaj jest to, co mój kod wygląda następująco:

li { 
 
    border: 1px solid black; 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline-block; 
 
    transform-origin: right bottom; 
 
    transform: rotate(270deg); 
 
}

<li> 
 
    <div> 
 
    <p>Some Text</p> 
 
    </div> 
 
</li> 
 

 
<li> 
 
    <div> 
 
    <p>Some Text</p> 
 
    </div> 
 
</li>

Answer 1

Zamiast przekształcać: Obrót (xdeg); możesz użyć writing-mode, aby to osiągnąć.

składnia Formalna

pozioma-TB | vertical-rl | pionowy-lr | sideways-rl | bokiem-LR

Kod revisited: http://codepen.io/gc-nomade/pen/MpNBMa lub poniżej

li { 
 
    border: 1px solid black; 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
p.rotate { 
 
    writing-mode: vertical-rl; 
 
    /* for obsolete safari old win, add vendor prefix -webkit- */ 
 
    writing-mode: tb-rl; 
 
    /* IEs */ 
 
    /* writing-mode:sideways-lr; could be the one */ 
 
    /* use scale() eventually untill sideways-lr is working everywhere */ 
 
    transform: scale(-1); 
 
    padding: 1em; 
 
    background: yellow; 
 
    /* show me */ 
 
    max-height:10em; /* will force text to break on several lines if too long */ 
 
}

<ul> 
 
    <li> 
 
    <div> 
 
     <p class="rotate">Some Text</p> 
 
     <p>aside <br/>any <br/>other <br/>text <br/>aside <br/>any <br/>other <br/>text </p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div> 
 
     <p class="rotate">Some more Text<br/>over 2 lines</p> 
 
     <p>aside any other text</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <p class="rotate">Some more Text over 10em of height at the most</p> 
 
     <p>aside any other text</p> 
 
    </div> 
 
    </li> 
 
</ul>

Uwaga: MDN mówi:

To eksperymentalna technologia Ze specyfikacji tej technologii nie ustabilizował się, sprawdź kompatybilność tabela bility do użycia w różnych przeglądarkach. Zwróć również uwagę, że składnia i zachowanie eksperymentalnej technologii mogą ulec zmianie w przyszłych wersjach przeglądarek w miarę zmiany specyfikacji.

Sprawdź to tutaj: http://caniuse.com/#search=writing-mode