文本溢出Div时使用transform：rotate（90.0deg）

Question

这是我的工作http://jsfiddle.net/2h8tv/

我在这里使用css transform: rotate(90.0deg)。您可以看到容器中出现的文本。如何在不使用填充或边距的情况下解决此问题

Answer 1

我认为在这种情况下使用transform-origin应该是最合适的。使用transform: rotate(x)旋转元素时，旋转由特定原点完成。默认情况下，此原点设置为50% 50%，它是元素的确切中心 将以下样式添加到.rotate类

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

但是，您可以使此规则更加通用：

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

属性的第一部分是原点的垂直位置。所以在这种情况下我们将它设置为中间（50％）。第二个定义原点的水平位置，因此根据父div的宽度，我们应该在 px 中设置它。

Answer 2

这里有几个选项，显然只需添加填充就可以了。

但您也可以使用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/

Answer 3

您可以使用不间断空格  

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

检查 - ＆gt; http://jsfiddle.net/2h8tv/1/

Answer 4

如果您增加.rotate的字体大小。它会变得一致。