您可以使用 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中文网其他相关文章！