用 CSS 控制li列表的长度，让li里面的内容不换行显示，而且让多余li长度的内容用...表示...

weixin_30481087

于 2015-08-02 22:26:00 发布

阅读量772

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangjinhua/p/4696916.html

本文介绍如何使用CSS让li列表内的内容不换行显示，并用省略号表示溢出部分，通过设置white-space、overflow和text-overflow属性实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用 CSS 控制li列表的长度，让li里面的内容不换行显示，而且让多余li长度的内容用...表示，其实实现的方法很简单。我们只需要在对li的css样式进行控制就可以了，具体如下：

1 white-space:nowrap; /*不让文字内容换行*/
2 overflow:hidden;/*文字溢出的部分隐藏起来*/
3 text-overflow:ellipsis; /*用...替代溢出的部分*/

转载于:https://www.cnblogs.com/wangjinhua/p/4696916.html