masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > 如何实现隐藏多余的字用省略号代替

如何实现隐藏多余的字用省略号代替

一个新手
Lepaskan： 2017-09-20 09:28:16
asal
2855 orang telah melayarinya

在前端经常会遇到类似的效果。 比如图中的“风花雪月与古镇火山-.....”后面“....”就是一段文字显示不下的时候默认隐藏然后用…来代替。
这里写图片描述  
只需要给元素加上以下3个css属性就可以实现了。

            overflow: hidden;//多余的隐藏            
            text-overflow:ellipsis;//多出来的用省略号代替            
            white-space: nowrap;//不换行
Salin selepas log masuk

Atas ialah kandungan terperinci 如何实现隐藏多余的字用省略号代替 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
berlebihan bersembunyi
sumber：php.cn
Artikel sebelumnya：css引入的方式有哪几种 Artikel seterusnya：CSS动画技巧与细节
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Mengapa meninggalkan 0ms tidur mematahkan peralihan css saya? Saya cuba melaksanakan animasi FLIP untuk melihat sama ada saya memahaminya dengan betul. ...
daripada 2024-04-06 16:29:50
0
2
490
Komponen sebagai sifat dengan parameter yang ditinggalkan Saya ingin mentakrifkan harta yang mesti menjadi komponen dengan harta yang ditinggalkan. ...
daripada 2024-04-03 20:25:34
0
1
278
Cuba mencari cangkuk yang sesuai untuk penyerahan pesanan WooCommerce Saya membangunkan pemalam untuk menyambungkan pesanan WooCommerce ke HubSpot. Masalah yang...
daripada 2024-03-31 18:06:07
0
1
415
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan