结构:
<el-table-column prop="callSummary" width="300" label="摘要">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" placement="top">
<div v-html="ToBreak(scope.row.text)" slot="content"></div>
<div v-html="ToBreak(scope.row.text)"></div>
</el-tooltip>
</template>
</el-table-column>
方法:
ToBreak (val) {
if (val == null || val == undefined) {
return ""
}
if (val.includes('\n')) { //判断字符串中存在 \n
let len = val.split('\n').length - 1 //判断字符串中存在几个 \n
let str = ""
for (let index = 0; index < len; index++) { //循环替换 \n
str = val.replace(/\n/g, '<br />')
}
return str
} else {
return val;
}
}
提示:
若是希望隐藏超出容器的文本,可以添加CSS样式
.omission {
white-space: nowrap; /* 确保文本不换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 显示省略号 */
}