文本滿溢出來的DIV當使用變換：旋轉（90.0deg）

這裏是我的工作http://jsfiddle.net/2h8tv/文本滿溢出來的DIV當使用變換：旋轉（90.0deg）

enter image description here

我在這裏使用CSS transform: rotate(90.0deg)。您可以看到從容器中出來的文本。如何在不使用填充或保證金的情況下解決此問題

2013-10-16 Dinesh Kanivu

我覺得用transform-origin應該是在這種情況下，最合適的事情。當您用transform: rotate(x)旋轉元素時，旋轉是由特定的原點完成的。默認情況下，該原點設置爲50% 50%，它是元素的確切中心。
添加以下樣式.rotate類

-webkit-transform-origin: 8px 12px;

然而，你可以使這個規則更通用：

-webkit-transform-origin: 50% 12px;

財產的第一部分是原點的垂直位置。所以在這種情況下，我們將其設置爲中等（50％）。第二個定義了原點的水平位置，所以根據父div的寬度，我們應該在px中設置它。

來源

2013-10-16 12:43:14 matewka

它也像填充。任何方式，謝謝，你能告訴我爲什麼這個文本正在溢出 –

我不知道我是否理解你。對我來說一切正常。整個文本是可見的。 – matewka

Web變換原點並不像填充一樣，它設置旋轉軸的位置。您的問題發生了，因爲您正在從文本的中心位置旋轉，並且由於旋轉文本時溢出的文本比您的文本長 –

如果將字號增加爲.rotate。它會被對齊。

來源

2013-10-16 12:36:36 Kishori

假設我想使用的字體大小9px，啥子應該做的？ –

你可以嘗試給行高：40px。它得到對齊。 – Kishori

你可以使用一個非換空間 

<div class="orangeblock "><div class="rotate"> &nbsp;Free</div></div> 
<div class="yelloblock"><div class="rotate"> &nbsp;$1999</div></div>

檢查 - >http://jsfiddle.net/2h8tv/1/

來源

2013-10-16 12:36:48

這是工作。爲什麼它會像這樣？ –

我不知道輪換爲什麼會搞砸。但對於沒有邊距和填充的解決方案，這應該會覆蓋你。 –

所以如果我使用2px的字體大小，我需要給更多的和15px 1 –

這裏有幾個選項，顯然只是添加填充將是最簡單的。

但你也可以混淆transform-origin政策。

transform: rotate(90deg); transform-origin:8px 12px; 
-ms-transform: rotate(90deg); /* IE 9 */ 
-ms-transform-origin:8px 12px /* IE 9 */ 
-webkit-transform: rotate(90deg); /* Safari and Chrome */ 
-webkit-transform-origin:8px 12px /* Safari and Chrome */ 
-moz-transform: rotate(90deg); /* Firefox */ 
-moz-transform-origin:8px 12px /* Firefox */ 
-o-transform: rotate(90deg); /* Opera */ 
-o-transform-origin:8px 12px /* Opera */

見及此例如http://jsfiddle.net/2h8tv/2/

來源

2013-10-16 12:43:37

文本滿溢出來的DIV當使用變換：旋轉（90.0deg）

回答

相關問題