介绍

实现京东右侧新闻，如下图：

分析

文字较多，超过部分不显示，在后面显示省略号，详见：
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;
}