Skip to content

Instantly share code, notes, and snippets.

@martinadamsdev
Forked from xhsdnn/TextEllipsis.vue
Created September 30, 2020 12:58
Show Gist options
  • Save martinadamsdev/ab6adb1abedbd98469bdde63e9769e76 to your computer and use it in GitHub Desktop.
Save martinadamsdev/ab6adb1abedbd98469bdde63e9769e76 to your computer and use it in GitHub Desktop.
单/多行文本截断的vue组件
<template>
<div class="text-ellipsis" :style="{height: textHeight,lineHeight: lineHeight}">
<div class="ellipsis-before" :style="{height: textHeight}"></div>
<div class="ellipsis-content">
<template v-if="$slots.default">
<slot></slot>
</template>
<template v-else>{{text}}</template>
</div>
<div class="ellipsis-after" :style="{top: '-'+lineHeight, height: lineHeight}">...</div>
</div>
</template>
<script>
export default {
props: {
text: String,
lineHeight: {
type: String,
default: "25px" // 行高,默认25px
},
row: {
type: [String, Number],
default: 2 // 截断行数,默认第二行进行截断
}
},
computed: {
textHeight() {
let rows = parseInt(this.row);
return `${parseInt(this.lineHeight) * (rows > 0 ? rows : 1)}px`;
}
}
};
</script>
<style scoped>
/* 单行文本截断 */
.text-ellipsis__single {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 单行文本截断 */
.text-ellipsis {
position: relative;
width: 100%;
overflow: hidden;
}
.text-ellipsis .ellipsis-before {
float: left;
width: 5px;
}
.text-ellipsis .ellipsis-after {
font-size: 20px;
text-align: right;
float: right;
position: relative;
width: 50px;
left: 100%;
margin-left: -45px;
padding-right: 5px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 60%);
}
.text-ellipsis .ellipsis-content {
float: right;
width: 100%;
margin-left: -5px;
word-break: break-all;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment