CSSを使用してフォントサイズを変更せずにテキストを引き伸ばすことはできますか?

CSS を使用したテキストのストレッチ: 可能ですか?

フォント サイズを変更せずにテキストをストレッチしたいという要望は、Web デザインにおける一般的な課題です。このユニークな効果を実現するには、CSS 2D Transforms が役に立ちます。

IE9 を含む最新のブラウザでサポートされているこのテクニックを使用すると、元のサイズを維持しながらテキストを垂直方向に変形できます。仕組みは次のとおりです:

1. テキストを Div で囲みます: まず、引き伸ばしたいテキストを
   で囲みます。 element.
2. CSS Transform を適用します: div に適用されるクラス内で、次の CSS ルールを使用します:

<code class="css">transform: scale(2,1);</code>

このスケール変換はテキストをスケールします。水平 (X 軸) の寸法は変更せずに、垂直 (Y 軸に沿って) 2 倍にします。

3. Inline-Block プロパティの追加: 表示を追加します。 inline-block プロパティを使用して、拡張されたテキストがコンテナ内で折り返されるようにします。

例:

<code class="html"><p>I feel like <span class="stretch">stretching</span>.</p></code>

<code class="css">span.stretch {
    display:inline-block;
    transform:scale(2,1);
}</code>

この例では単語を拡張します。テキストの残りの部分は伸ばさないままにして、垂直方向に「伸長」します。