div溢出文字省略显示

1.div中文字显示在一行,并将溢出的文字省略显示

     <div style="width:100px;height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">

         aaaaaaaaaa,bbbbbbbbbb,ccccccc

     </div>

    这样查出div的文字就会以省略的形式显示,并不是单独的截取。

    想要div以省略的形式显示的时候,只单独设定text-overflow:ellipsis;是没有效果的。因为它仅仅是注解,标注溢出时以省略的形式显示。所以必须要有white-space:nowrap,让文字显示子一行,又需要用overflow:hidden来使溢出的内容隐藏。

2.计算一个字符串的长度

   因为每个浏览器计算字符串的长度的方法不一样,所以在使用省略显示的时候可能会造成在不同的浏览器中显示的效果不一样。所以想要知道一个字符串的长度,可以将它放到一个span标签,即<span>string1string2</span>.然后使用jquery中的width()方法就可以得到在不同的浏览器中该字符串的长度了,即$("span").width()。