文本溢出div使用transform：rotate（xdeg） [英] Text overflowing out of div using transform: rotate(xdeg)

问题描述

使用css属性 transform：rotate（）; 工作正常，但是在水平定向文本下使用它时，它显示在 code>但我想它显示它内。我尝试了很多与显示，位置，左 ， top ， float 等属性，但没有什么工作。任何想法？

Using the css attribute transform: rotate(); works fine but when using it under horizontally oriented text it displayed outside of the div but I want it to display it within. I tried a lot with the display, position, left, top, float etc. attribute but nothing worked. Any ideas?

这是垂直文本的CSS代码：

Here is the css-code for the vertical text:

width:130px;
height:50px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */

下面是要尝试的示例：
http://jsfiddle.net/ty6Zj/

Here is the example to try: http://jsfiddle.net/ty6Zj/

推荐答案

您应该使用



You should use transform-origin property for that

transform-origin: 40px 20px;

演示

注意： transform ，也应该使用标准的。

Note: You've used all proprietary declarations for transform, should use a standard one as well..

transform:rotate(270deg);

此外，请务必在结尾 ...

Also, make sure you have this at the end of the proprietary properties...

这篇关于文本溢出div使用transform：rotate（xdeg）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！