最近在写table表格，有些文字过长，超出固定宽度需要显示省略号，但是给td加属性一直不生效，特此记录一下。
表格
<tbody>
<tr v-for="(item, index) in tableData" :key="index" @click="shujiDetail(item)">
<td class="body_father" v-for="(i,k) of thead">
<div class="body_td">{{ item[i.value] }}</div>
<div class="ec_body">{{ item[i.value] }}</div>
</td>
</tr>
</tbody>
//css代码
<style lang="scss" scoped>
// hover 显示全部文字
.body_father {
position: relative;
.ec_body {
position: absolute;
padding: 1px 8px;
top: -15px;
background: white;
display: none;
}
&:hover {
.ec_body{
display: block;
color: black;
}
}
}
// 文本过长显示省略号
.body_td {
padding: 5px 12px;
width: 110px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
text-align: center;
}
</style>
需要注意的是，white-space: nowrap;这个css样式可以对td产生效果，其他的都不行。so需要在td标签里面加div标签才可以产生效果。
