超过显示...展开

最新推荐文章于 2024-07-31 11:19:18 发布

原创最新推荐文章于 2024-07-31 11:19:18 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了前端组件在信息展示方面的优化技巧，通过调整组件的高度、溢出隐藏属性及文本换行，实现更佳的用户体验。文章详细介绍了如何根据不同场景设置组件样式，包括背景颜色、相对定位、内边距等，同时提出了一种智能文本显示方案，根据文本长度自动调整显示内容，超过一定长度则以省略号结尾并提供展开按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
                }
            }
        }