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%) に設定します。2 つ目は原点の水平位置を定義するため、親 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

のフォントサイズを大きくすると、.rotate. 揃うことになります。