圍繞帶DIV的轉換元素

我想旋轉DIV中的文本元素，但是在文本旋轉後，我的div摺疊就像是空的一樣。是否有一個CSS技巧，讓我的DIV仍然圍繞着我的內在元素？圍繞帶DIV的轉換元素

這裏是我的代碼如下所示：

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>

來源

2017-04-10 Peter

使用寫作模式，它是爲了這個目的http://codepen.io/gc-nomade/pen/MpNBMa https://developer.mozilla.org/做en-US/docs/Web/CSS/writing-mode –

@GCyrillus看到這個問題已經有3人贊成，你可能想讓你的評論成爲一個答案。 – domsson

彼得，我以前的評論是否回答你的問題？如果是的話，我可能會重新打開並回答問題，因爲它畢竟不會是重複的:) –

相反變換：旋轉（xdeg）;您可以使用writing-mode來實現此目的。

形式語法

水平-TB | vertical-rl | vertical-lr | sideways-rl |側身-LR

您的代碼重新審視：http://codepen.io/gc-nomade/pen/MpNBMa以下

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>

注：MDN說：

這是一個實驗性的技術因爲這項技術的規範尚未穩定，請檢查兼容性適用於各種瀏覽器的功能表。還請注意，隨着規範的變化，實驗技術的語法和行爲在未來版本的瀏覽器中可能會發生變化。

看看這裏：http://caniuse.com/#search=writing-mode

來源

2017-04-10 17:40:05

嘿，我看到你是誰回答了[早先的問題]（http://stackoverflow.com/questions/36140628/resize-div-when-content-is-rotated?noredirect=1&lq=1）。所以你可以在那裏更新你的答案。 –

然後我們可以再次關閉這個問題。 ;） –

@MrLister nop那是一個關於轉換一個容器的大小，大小沒有關係，這裏這個問題是關於容器根據其旋轉的文本大小進行調整;）（我給它放了一個黃色背景以顯示它的立場和如果文本長度增加，它如何擴展，它也可以分成幾行;） –

圍繞帶DIV的轉換元素

回答

相關問題