超过显示...展开

template:

            <div class="info1">
                <!-- <p>{{server[0].thUintroduceText}}</p> -->
                <p ref="ptext"> {{text}} <i @click="hidden()" v-if="show">展开</i></p>
            </div>

script:

            hidden() {
                this.text = this.server[0].thUintroduceText
                this.show = false
            },

                        if (this.server[0].thUintroduceText) {
                            console.log(this.server[0].thUintroduceText.length);
                            if (this.server[0].thUintroduceText.length >= 55) {
                                this.text = this.server[0].thUintroduceText.substring(0, 55);
                                this.text = this.text + "...";
                                this.show = true;
                            }else {
                                this.text = this.server[0].thUintroduceText
                                this.show = false;
                            }
                        }

css:

  .info1 {
            background: #fff;
            position: relative;
            padding: 15px 9px 0;
            overflow: hidden; // height: 79px;
            p {
                line-height: 22px;
                text-indent: 2em;
                letter-spacing: 1.2px; // text-overflow: ellipsis;
                // white-space: nowrap;
                // overflow: hidden;
            }
            i {
                color: #39c;
            }
            span {
                width: 75px;
                text-align: right;
                position: absolute;
                bottom: 0;
                right: 9px;
                color: #39c;
                background: #fff;
                i {
                    color: #333;
                }
            }
        }