文本无法显示省略号，还把布局打乱了。请问大佬怎么回事

子组件：
<template>
   <div class="goods-info">
        <div class="goods-image">
            <img v-lazy="mall.image" width="90%" />
        </div>
        <div class="name1">{{mall.name}}</div>
        <div class="goods-price">￥{{mall.price}}</div>
    </div>
</template>

<script>
    export default {
        data(){
            return{

            }
        },
        props:{
            mall:{
                type:Object,
                required:true
            }
        }
    }
</script>

<style lang="less" scoped>
.name1{
    padding: 0 8px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space:nowrap; 
}
</style>
父组件：
<div class="hot-goods">
            <!--这里需要一个list组件,gutter指空隙，20px-->
            <van-list>
                <van-row gutter="20">
                    <van-col span="12" v-for="(item,index) in hotlist" :key="index"> 
                        <hotmall :mall="item"></hotmall>
                    </van-col>
                </van-row>
            </van-list>
          </div>

给.name1指定一个width