介绍
实现京东右侧新闻,如下图:
分析
文字较多,超过部分不显示,在后面显示省略号,详见:
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;
}