CSS案例:京东新闻列表

介绍

实现京东右侧新闻,如下图:

分析

文字较多,超过部分不显示,在后面显示省略号,详见:
css教程: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