Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement