css li元素中的文字超出隐藏不换行效果
分类:实例代码
css li元素中的文字超出隐藏不换行效果属于前端实例代码,有关更多实例代码大家可以查看。
在网页制作中,有时候可能要求比较粗糙一些,只需要简单的截取字符串就可以了,没有太多的美化效果,下面就是一段这样的代码实例,能够将超出的文本隐藏,这样就不会出现换行了。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> ul li{ list-style:none; height:20px; width:300px; line-height:20px; font-size:12px; overflow:hidden; } </style> </head> <body> <ul> <li>前端教程网欢迎您,只有努力奋斗才会有美好的明天。</li> <li>没有人一开始就是高手,分享和互助的胸怀才是进步的最大源动力。</li> </ul> </body> </html>
隐藏超出的字符串,上面用到的主要是overflow:hidden。
css li元素中的文字超出隐藏不换行效果,这样的场景在实际项目中还是用的比较多的,关于css li元素中的文字超出隐藏不换行效果就介绍到这了。