Bagaimana untuk menyembunyikan tiga mata dalam css

Cara menyembunyikan tiga titik dalam css: 1. Dalam kes satu baris, limpahan teks boleh dipaparkan sebagai tiga titik melalui atribut css "text-overflow: ellipsis;" 2. Dalam kes berbilang baris, Ini boleh dicapai melalui atribut "overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3

Cara mencapai tiga mata bersembunyi dalam css?

limpahan teks css disembunyikan sebagai tiga titik...

(1) Baris tunggal

white-space: nowrap;//不换行
text-overflow: ellipsis;//将文本溢出显示为（…）
overflow: hidden;//溢出隐藏。

(2) Berbilang baris

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Nota: Atribut limpahan teks menentukan cara teks harus dipaparkan apabila ia melimpahi elemen yang mengandunginya. Selepas limpahan, anda boleh menetapkan teks untuk dipotong, untuk memaparkan elipsis (...), atau untuk memaparkan rentetan tersuai (tidak disokong oleh semua penyemak imbas).

text-overflow perlu digunakan dengan dua atribut berikut:

white-space: nowrap;
overflow: hidden;

Sintaks

text-overflow: clip|ellipsis|string|initial|inherit;

Nilai

klip untuk memotong teks.

elipsis memaparkan simbol elipsis... untuk mewakili teks yang dipangkas.

rentetan Gunakan rentetan yang diberikan untuk mewakili teks yang dipangkas.

awal ditetapkan kepada nilai lalai harta itu.

warisi mewarisi nilai atribut daripada elemen induk.

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan tiga mata dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!