css超出文字用省略号表示

css代码

//css
.name{
      width: 62px;
       display: inline-block; 
       font-family: PingFangSC;
       color: #F7F6FD;                  
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
//html:  数据v-for遍历出来的
<div v-for="(item, index) in list" :key="item.id" class="item">
            <div class="name" v-if="item.name.length > 3">
                <el-tooltip class="nameBox" effect="dark" :content="item.name" placement="bottom-start">
                    <span>{{ item.name }}</span>
                </el-tooltip>
            </div>
            <div class="name" v-else>
                <span>{{ item.name }}</span>
            </div>
        </div>

需求是，名字超过3个字，就显示3个字，多于3个，显示3个字并且显示省略号，鼠标悬浮显示全部名字，用到了elementUI中的tooltip,内容是后台返回，前端遍历的，就拿到遍历的值，加上类名就行.
省略号的样式代码为：
width:50px; //要加宽度 ，若是span等行内元素，加个display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;