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

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

WBOY
WBOY原创
2016-06-24 12:27:161485浏览

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

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

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

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

如下为源码:




   
   
   
   


   

       

           

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

           

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

           

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

           

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

           

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

           

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

           

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

       

   


对以上源码的部分解释

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn