Bolehkah Anda Meregangkan Teks Tanpa Mengubah Saiz Fonnya dengan CSS?

Regangan Teks dengan CSS: Adakah Mungkin?

Keinginan untuk meregangkan teks tanpa mengubah saiz fonnya adalah cabaran biasa dalam reka bentuk web . Untuk mencapai kesan unik ini, CSS 2D Transforms memainkan peranan.

Disokong oleh penyemak imbas moden, termasuk IE9 , teknik ini membolehkan anda mengubah bentuk teks secara menegak sambil mengekalkan saiz asalnya. Begini cara ia berfungsi:

1. Balut Teks dalam Div: Mulakan dengan melampirkan teks yang anda ingin bentangkan dalam
   elemen.
2. Gunakan Transformasi CSS: Dalam kelas yang digunakan pada div, gunakan peraturan CSS berikut:

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

Transformasi skala ini menskalakan teks dengan faktor 2 secara menegak (di sepanjang paksi-y) sambil mengekalkan dimensi mendatar (paksi-x)nya tidak berubah.

3. Tambah Harta Blok Sebaris: Tambahkan paparan: sifat blok sebaris untuk memastikan teks yang diregangkan dibalut dalam bekasnya.

Contoh:

<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>

Contoh ini akan meregangkan perkataan "meregang" secara menegak sambil mengekalkan teks yang selebihnya tidak diregangkan.

Atas ialah kandungan terperinci Bolehkah Anda Meregangkan Teks Tanpa Mengubah Saiz Fonnya dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!