现在我们在做一些项目的时候,经常会遇到文字过长让多出来的文字隐藏掉
1. 溢出部分以省略号显示
首先,我们需要给标签定宽
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "DemoHome",
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
/deep/ .el-table td.el-table__cell div{
width: 63px; // 定宽
overflow: hidden; // 溢出部分隐藏
white-space:nowrap; // 有些标签会自动换行,这个是禁止自动换行
text-overflow:ellipsis; // 使溢出部分以省略号显示,这个省略号是会占用你设置的固定宽度的
}
</style>
上面的这个例子是element ui 表格里面的样例,那么我们又是如何让鼠标放在省略号上面将其显示出来呢
2. 鼠标放在省略号上面将其显出
<el-table-column prop="date" label="日期" show-overflow-tooltip>
<template slot-scope="scope">
<div class="over-content">
{{ scope.row.date }}
</div>
</template>
</el-table-column>
.over-content {
width: 80px; // 定宽
overflow: hidden; // 溢出部分隐藏
white-space: nowrap; // 有些标签会自动换行,这个是禁止自动换行
text-overflow: ellipsis; // 使溢出部分以省略号显示,这个省略号是会占用你设置的固定宽度的
}
最主要的是show-overflow-tooltip
这个属性值,下面的css样式是你在没有使用溢出部分以省略号显示所使用的css样式