多行文本溢出使用展开，隐藏

川长思鸟来 2022-10-15 14:53 136阅读 0赞

![在这里插入图片描述][20210525195247991.gif]  
多行溢出组件

<template>
      <div class="multiline-overflow-wrapper">
        <input v-model="showall" class="exp" type="checkbox" />
        <div class="text" :style="textStyleObject">
          <label class="btn" @click="showall = !showall"></label>
          {
       { info }}
        </div>
      </div>
    </template>
    <script> export default { props: { info: { type: String, default: '', }, lineClamp: { type: Number, default: 3, }, }, data() { return { showall: false, } }, computed: { textStyleObject() { return { '-webkit-line-clamp': this.showall ? 999 : this.lineClamp, } }, }, watch: { info() { this.showall = false }, }, } </script>
    <style lang="less" scoped> .multiline-overflow-wrapper { display: flex; margin: 6px 0 20px 0; overflow: hidden; font-size: 14px; line-height: 20px; .text { position: relative; max-height: 4.5em; // display: -webkit-box; overflow: hidden; line-height: 1.5; text-align: justify; text-overflow: ellipsis; word-break: break-all; transition: 0.3s max-height; } .text::before { float: right; height: calc(100% - 20px); content: ''; } .text::after { position: absolute; width: 999vw; height: 999vw; margin-left: -100px; box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff; content: ''; } .btn { position: relative; float: right; clear: both; margin-left: 10px; padding: 0 8px; color: #206ef7; line-height: 20px; border-radius: 4px; cursor: pointer; } .btn::after { content: '展开▽'; } .exp { display: none; } .exp:checked + .text { max-height: 200px; } .exp:checked + .text::before { visibility: hidden; } .exp:checked + .text .btn::after { // content: '收起'; content: ''; } .btn::before { position: absolute; left: -5px; color: #333; transform: translateX(-100%); content: '...'; } } </style>

[20210525195247991.gif]: /images/20221014/be91a8326c704523bba0854b2ea0dc57.png