css点点点“更多“展开折叠

最新推荐文章于 2024-04-21 18:11:50 发布

cuiZero0

最新推荐文章于 2024-04-21 18:11:50 发布

阅读量468

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_43991433/article/details/130153731

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

css右下角的点点点更多展开折叠样式

1.展示效果图
在这里插入图片描述
2.插入结构

   <div className="dbi-text-content">
              <div
                className={
                  isShow ? 'dbi-text-title-show' : 'dbi-text-title-noshow'
                }
              >
                <label
                  className="dbi-text-title-btn"
                  htmlFor="exp"
                  onClick={() => {
                    setShow(!isShow);
                  }}
                >
                  {isShow ? 'Less All' : 'More'}
                </label>
                <span>{e.text}</span>
              </div>
            </div>

2.插入css


 .dbi-text-content {
    display: flex;
    .dbi-text-title {
      // font-weight: 500;

      &-noshow {
        font-size: 12px;
        line-height: 22px;
        text-align: left;
        color: var(--color-neutral-9);
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        &::before {
          content: '';
          float: right;
          height: 100%;
          margin-bottom: -20px;
        }
      }
      &-show {
        font-size: 12px;
        line-height: 22px;
        text-align: left;
        color: var(--color-neutral-9);
        &::before {
          content: '';
          float: right;
          height: 100%;
          margin-bottom: -20px;
        }
      }

      &-btn {
        float: right;
        clear: both;
        margin-right: 8px;
        margin-top: -2px;
        margin-left: 1px;
        cursor: pointer;
        color: var(--color-primary-5);
      }
    }
  }