CSS案例：京东新闻列表 作者：马育民 • 2023-05-19 15:31 • 阅读：10077 # 介绍 实现京东右侧新闻，如下图： [](/upload/0/0/1IX5WgdHnm1C.jpg) ### 分析 文字较多，超过部分不显示，在后面显示省略号，详见： css教程：[text-overflow: ellipsis](https://www.malaoshi.top/show_1IX5WgZB8Cu1.html "text-overflow: ellipsis") ### html ``` <ul class="news"> <li> <a href="#"><span>热评</span>华硕灵耀14 2023：2.8K OLED高刷屏轻薄本</a> <li> <li> <a href="#"><span>推荐</span>给孩子做水蒸蛋，我用“满分”黄天鹅可生食鸡蛋！</a> <li> <li> <a href="#"><span>推荐</span>LAN水感卸妆油，不带走皮脂只带走污垢</a> <li> <li> <a href="#"><span>热门</span>海纳百味强保鲜，美的</a> <li> </ul> ``` ### css ``` .news{ list-style: none; width: 150px; line-height: 16px; } .news li{ /* 不换行 */ white-space: nowrap; /* 超出的部分截断，后面显示省略号。要加在 li 标签上 */ text-overflow: ellipsis; /* ellipsis 要搭配 hidden 才生效 */ overflow: hidden; color: #999; } .news a{ color: #999; text-decoration: none; } .news span{ color: #e1251b; margin-right: 5px; } ``` 原文出处：https://malaoshi.top/show_1IX5WgfzvISF.html