CSS 属性 -webkit-line-clamp 和 -webkit-box-orient：多行文本限制

在界面开发中，尤其是商品目录、商品卡片和列表布局里，经常会遇到一个需求：只展示文本的前几行内容，剩余部分用省略号隐藏。
这样可以保持商品网格布局整齐，避免因描述文字过长导致页面排版错乱。

1. -webkit-line-clamp
   该属性用于设置文本最多显示多少行。
   如果文字内容行数少于设定值，就会完整全部显示；
   如果文字超出设定行数，就会在最后一行末尾自动出现省略号（…），提示用户后面还有更多内容。
2. -webkit-box-orient
   该属性用来控制弹性容器内部元素的排列方向。
   使用行数限制功能时必须搭配这个属性，因为 line-clamp 只能配合 display: -webkit-box 生效。
   取值 vertical 代表内部元素从上到下垂直排列。如果缺少这个属性，line-clamp 多行省略功能完全失效。