您可以使用 CSS 拉伸文字而不改變其字體大小嗎？

使用 CSS 拉伸文字：可能嗎？

希望在不改變字體大小的情況下拉伸文字是網頁設計中的常見挑戰。為了實現這種獨特的效果，CSS 2D Transforms 發揮了作用。

受現代瀏覽器（包括 IE9）的支持，該技術允許您在保持文字原始大小的同時垂直變形文字。它的運作原理如下：

1. 將文字換行在Div 中： 首先將要拉伸的文字括在
   中
2. 應用CSS 轉換： 在應用於div 的類別中，使用下列CSS 法則：

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

此縮放變換會縮放文字垂直（沿著y 軸）增加2 倍，同時保持水平（x 軸）尺寸不變。

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>

此範例將拉伸單字垂直“拉伸”，同時保持文字的其餘部分不拉伸。

以上是您可以使用 CSS 拉伸文字而不改變其字體大小嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！