html - 文本溢出 Div 使用变换时 : 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。