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

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

一个新手asal: 2017-09-20 09:28:162755semak imbas

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

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

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

Kenyataan：

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 sebelumnya：css引入的方式有哪几种Artikel seterusnya：CSS动画技巧与细节

Artikel berkaitan

Lihat lagi