2012-02-28 11 views
3

私は現在、プロジェクトの中で、テキストの端がコンテナの端に揃うようにコンテナ内のテキストを回転させたいと考えています。テキストとそのコンテナの両方をどのように回転させることができますか?

私は通常、それを回転させる場合は、次のようになります:あなたが見ることができるようにhttp://jsfiddle.net/lumio/a3Z4C/
は、テキストがコンテナから流出するが、私はその中にそれを持っていると思います。
完全なテキストを回転させるのではなく、行をコンテナに合わせる必要があります。

CSSまたはJSのソリューションを知っている人はいますか?あなたは、テキストボックスの内側にうまく流れコンテナのdivにいくつかのパディングを追加した場合

ベスト

+0

の内側に維持すること、コンテナTの内側に入れたものをそれだけで、コンテナの上にいくつかのパディングを置くのに十分ではないですか? http://jsfiddle.net/a3Z4C/4/あるいは、ボックスの端に基づいてラインリターンが起こるようにしたいのですか? –

+0

変換をコンテナに置くのはなぜですか? http://jsfiddle.net/XWHsC/ – j08691

+0

@JamesMontagne:はい...行はボックスのエッジに基づいている必要があります:) – lumio

答えて

0

を願っています。あなたのjsFiddleの例に少なくとも10pxを加えて、テキストをコンテナの中に置いてください。 Howerverの場合は、次のようなパディングを追加する方が良いかもしれません。

.container { 
    width: 300px; 
    background: silver; 
    margin: 20px; 
    padding: 10px; 
} 
+0

あなたの返信をありがとう、しかし別の3段落があればどうなりますか? ;)その解決策は動作しません – lumio

+0

非常に真実... :) – ItsMIllerTime65

1

回転を動的に計算していますか?その場合、動的にいくつかのパディングをコンテナに追加することができます。わからない正確なアルゴリズムがどうなるか、P =(D * N)のようなもの

P =パディングが、 D =度、 N =マジックナンバーはそれをすべての作業:)

をするだろう
+0

あなたは面白いです:Dしかし、Nは行の数になりますが、私はJSでその数を計算する方法を知らない: とにかく...多分もっと良いものがあります – lumio

+0

@Lumio:行数=(コンテナのピクセルの高さ/使用しているフォントのピクセルの高さ)。ハードコーディングされた値にかなりの量が追加されていることは分かっていますが、それは概念の証明だと思います。 – Matt

+0

はい...私はまた線を考えました...だからN =線の高さ - またはNを42にeqalする必要がありますか? :D とにかく...問題は別のものになります...完全なテキストは回転しますが、線は回転しません – lumio

0

これには1つのオプションがあります。コンテナを他のコンテナの内側に置くことができます。だから、関係なく、あなたは常に親

/jsfiddle.net/smitdesai/dsvUS/