首頁 > web前端 > html教學 > CSS+DIV实现文字一行内显示,并且过多的文字以点来代替_html/css_WEB-ITnose

CSS+DIV实现文字一行内显示,并且过多的文字以点来代替_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:27:16
原創
1488 人瀏覽過

有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替。当鼠标放上面的时候会以title的形式显示所有的内容。

如下图所示为使用样式排版之前的效果:

如下图所示为使用样式排版之后的效果:

明显下面的效果图要比之前友好实用多了。

如下为源码:




   
   
   
   


   

       

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

           

                测试测试测试测试测试测试测试
           

       

   


对以上源码的部分解释

css中white-space:nowrap主要是控制文字能够在div中一样显示,不换行,overflow:hidden和text-overflow:ellipsis则是对于过多的文字进行隐藏并且将多余的文字以点号进行代替。这里鼠标放在div上的时候能够显示所有的文字,主要是通过div的title属性进行实现的。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板