正常情况：
但万一商品名太长，那就有点尴尬了：
处理单行、多行文本溢出登场：
1.处理单行文本
对应的标签是div
.text{
width: 100px;//宽度要定义好，不能用%
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//显示省略符号来代表被修剪的文本。
white-space: nowrap;//文字不换行
}
现在就不会了，其他地方同理，如果首页的卡片，用户卡片等等，这也可以将重复的代码提取出来（后面三行），写在global.css中
然后注意要在运用的时候设置固定宽度。
自动换行：
word-wrap: break-word;
强制英文单词断行:
word-break: break-all;
2.多行文本溢出
.text-more{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;//必须结合的属性，将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2;//控制文本的行数
-webkit-box-orient:vertical;//必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
}
像备注这个就可以用多行溢出
控制宽度，行数这个各类自定义
3.关于商品图片长宽溢出的问题
还是一个细节问题：当img设置为width:100%时，竖图会溢出，设置为height:100%时，横图会溢出，两个设置则长方形图片会拉伸
拉伸：
长溢出：
所以采用Vue动态设置CSS样式
先加载图片（注意要onload加载后才能获取图片宽高），获取图片宽高
// 创建实例对象
var img = new Image();
// 图片地址
img.src = this.goodInfo.image;
let res = {}
// onload加载图片，然后获取宽高，加载后才能获取
img.onload = function () {
res = {
width: img.width,
height: img.height
}
console.log(res); //获取到图片的宽高，不能写外面，这个涉及了异步的过程
}
可以使用url.complete和callback结合处理这个问题，但比较麻烦，下面采取promise进行优化
return new Promise((reslove, reject) => {
// 创建实例对象
var img = new Image();
// 图片地址
img.src = imageUrl;
img.onload = () => {
// 当图片加载成功则调用resolve
reslove({
width: img.width,
height: img.height
})
}
})
这段逻辑在多个地方用到，我们可以把它抽离出来，封装成方法，放utils包下，再按需导入Vue中。
在Vue组件的template中，此处用了下图片懒加载：
<!-- 图片 -->
<div class="good_img">
<img v-lazy="getFirstImg(goodInfo.image || goodInfo.goodsImage)" alt=""
:class="height > imgwidth ? 'height':'width'">
</div>
在css中：
.height{
height: 100%;
}
.width{
width: 100%;
}
处理这个问题只想到了这个方法，如果有更好的操作，请大佬在评论区指点指点...
