防止页面加载图片时抖动

• 在css中，以% 为单位的 margin和 padding值的计算，是相对于其父元素的width而非 height。

<div class="img-box">
  <img :src="food.image">
</div>

.img-box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%; // 高宽比(高:宽 * 100%)
}

img {
    position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

• 单行文本溢出显示省略号（…）

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

1.png

• 多行文本溢出显示省略号（…）

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

2.png