jquery - SPANが含まれているDIVをオーバーフローできるようにする

Question

次のコードを使用して、サンプルの透かしを画像の上に配置（および回転）しようとしていますが、テキストサイズが大きすぎるか長すぎると、単語が折り返され、2行が作成されます。空白での折り返しを無効にした場合：nowrap、スパンが大きくなりすぎると、テキストが別のポイントを中心に回転するようになりました。

<div class="customize-preview">
    <img src="{{ sample_image }}" id="sample-image" class="customize-image" />
    <div class="customize-overlay">
        <div style="display: table;" class="customize-overlay">
            <div style="display: table-row;">
                <div style="display: table-cell;" class="customize-watermark" id="watermark">
                    <span>Sample Watermark</span>
                </div>
            </div>
        </div>
    </div>
</div>

cssは

.customize-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.customize-watermark {
    vertical-align: middle;
    text-align: center;
    background-color:transparent;
}

ユーザーはサンプル透かしテキストを変更できますが、長すぎたり大きすぎたりすると、単語が折り返され始めます。本当に長い単語を1つ入力すると、含まれているdivが展開され、そのテキストを回転させようとすると、ピボットポイントが正しくなくなります。また、あふれているテキストを非表示にして、それが起こらないようにしたいと思います。

ここでデモを作成しました：http：//jsfiddle.net/yu9Mu/

2行に折り返されていることがわかりますが、1行のままにしてオーバーフローさせたいと思います。また、空白：nowrapを付けると、単語は折り返されませんが、スパンは拡大し続けます。次に、-webkit-transform：rotate（90deg）を実行しようとすると、別のポイントを中心に回転しているように見えます。

前もって感謝します！

Answer 1

あなたの質問がうまくいった場合、適切な空白を設定する必要があると思います

.customize-watermark {
    vertical-align: middle;
    text-align: center;
    background-color:transparent;
    white-space: nowrap;
}

このフィドルを参照してください

Answer 2

http://jsfiddle.net/demchak_alex/yu9Mu/3/

追加

 white-space: nowrap;

透かしに