你如何调整270deg旋转文本左上角？ [英] How do you align 270deg rotated text to top left?

问题描述

这应该是一个很简单的问题，你会觉得。我有我想要旋转-90度的一些标题文本框。我想这绝对定位，使这个词到底是轻推入左上角。我能得到这个调整的底部很轻松了，但问题是，可变长度的文本，似乎不可能有调整顶端时，它一直停留在容器内，因为像 {顶部：0 } 之前转换的标题进行操作。对于我而言这只是工作需要在Firefox。我可以使用JavaScript，如果这是唯一的解决办法，但你会觉得这可能只CSS来实现。

This should be a very simple problem you would think. I have a box with some title text that I want to rotate -90 degrees. I would like it to be absolutely positioned so that the end of the word is nudged into the top left corner. I can get this to align to the bottom easily enough, but the problem is that with variable length text it seems impossible to have it consistently stay within the container when aligning to the top because things like {top: 0} operate on the title before the transform. For my purposes this only needs work in Firefox. I can use javascript if that is the only solution, but you would think this could be done with just CSS.

推荐答案

您应该使用 变换出身 调整转变点，随着一些创造性地使用定位属性。

You should use transform-origin to adjust the transformation point, along with some creative use of positioning properties.

http://jsfiddle.net/thirtydot/JxEfs/1/

CSS：

#box {
    padding: 30px;
    position: relative;
    border: 1px solid blue;
}
#box > div {
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 100%;
    white-space: nowrap;

    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
}

HTML：

<div id="box">
    hello
    <div>rotated!</div>
</div>

这篇关于你如何调整270deg旋转文本左上角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！