html 手机商品列表页面,HTML - 商品列表项小结（移动端）

前言

电商网站中常会以列表的形式展示商品项，这里参照一些电商网站，将通常使用的结构和样式小结如下。

商品列表项.png

小结：

1.在商品项的最外层包裹a标签，便于用户点击查看详情

a.item-block {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

2.商品(介绍)标题单行显示，溢出隐藏，超出部分显示省略号"..."

.item-title {

text-overflow: ellipsis; /*省略号*/

white-space: nowrap; /*文本会显示在同一行，直到遇到
标签为止*/

overflow: hidden; /*溢出隐藏*/

}

单行显示.png

3.商品介绍(标题)限制最大行数，超出部分显示省略号"..."

.item-title {

display: -webkit-box;

-webkit-line-clamp: 2; /*行数*/

-webkit-box-orient: vertical