Rumah > hujung hadapan web > tutorial css > 如何实现隐藏多余的字用省略号代替

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

一个新手
Lepaskan: 2017-09-20 09:28:16
asal
2845 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:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan