文本 超出边界显示...
前言
组件
创建 text-ellipsis.vue 文件，内容如下：
<template>
<el-tooltip
effect="dark"
:content="showText || placeholder"
placement="top-start"
class="tooltip"
:open-delay="500"
popper-class="text-ellipsis-tooltip-popper"
>
<div class="text" :style="textStyle">
{{ showText || placeholder }}
</div>
</el-tooltip>
</template>
<script>
export default {
name: 'text-ellipsis',
props: {
text: String,
maxLength: Number,
maxLine: {
type: Number,
default: 1
},
placeholder: {
type: String,
default: ''
}
},
computed: {
showText() {
if (this.maxLength) {
return this.text.substring(0, this.maxLength) + '...'
} else
return this.text
},
textStyle(){
return {
'-webkit-line-clamp': this.maxLine
}
}
},
}
</script>
<style scoped lang="scss">
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>
<style>
.text-ellipsis-tooltip-popper {
max-width: 500px;
}
</style>
Last modified: 15 十一月 2023