Cara menggunakan css untuk memaparkan hanya satu baris jika melebihi tiga baris

Cara menggunakan css untuk memaparkan hanya satu baris apabila melebihi tiga baris: 1. Buka fail HTML yang sepadan 2. Tetapkan atribut css untuk label teks kepada ".text_singlerow {display:block; white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}" boleh dipaparkan dalam satu baris.

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

Cara melaksanakan css kepada sahaja memaparkan lebih daripada tiga baris Satu baris?

Kawal bilangan baris yang dipaparkan apabila teks berbilang baris dipaparkan dalam CSS

Kadang-kadang perlu untuk memaparkan hanya satu baris, atau dua baris, atau tiga baris kandungan teks berbilang baris Pada masa ini, anda perlu menetapkan atribut yang berkaitan dalam css adalah seperti berikut. hanya dua baris ditetapkan untuk dipaparkan, baris kedua akan berakhir dengan paparan elipsis, dan baris ketiga...N baris masih akan dipaparkan, jika ketinggian label cukup tinggi, jadi untuk mengawal paparan nombor daripada baris, selain daripada menetapkan gaya css, ia juga perlu untuk menggabungkan tetapan ketinggian label.

Pembelajaran yang disyorkan: "

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

tutorial video css

"

Atas ialah kandungan terperinci Cara menggunakan css untuk memaparkan hanya satu baris jika melebihi tiga baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!