两种方式实现文本超出指定行数显示展开收起...

需要实现这样一个功能
默认高度下文本超出隐藏,点击展开可查看所有内容,点击收起可折叠
方法一:通过html和css实现
代码部分
cpp 复制代码
html:
 <div className="expand-fold">
        <input id="check-box" type="checkbox" />
        <div className="content">
          {/* htmlFor和input的id一致 */}
          <label className="label" htmlFor="check-box"></label>
          <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo
            quas architecto perspiciatis voluptas odio magni dolorem doloribus
            recusandae commodi accusamus voluptates, laudantium tempora, est
            soluta blanditiis labore tempore officia ipsam! Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Explicabo quas architecto
            perspiciatis voluptas odio magni dolorem doloribus recusandae
            commodi accusamus voluptates, laudantium tempora, est soluta
            blanditiis labore tempore officia ipsam!
          </span>
        </div>
      </div>

css:
  .expand-fold {
      display: flex;

      #check-box { // 将勾选框隐藏
        display: none;
      }
      #check-box:checked + .content { // 选中勾选框(点击展开)时修改最大高度,合理即可
        max-height: 800px;
      }
      #check-box:checked + .content .label { // 展开时,隐藏省略号,文字改为收起
        &::before {
          // 隐藏省略号
          content: '';
        }
        &::after {
          content: '收起';
        }
      }

      .content { 
        font-size: 16px;
        flex: 1;
        max-height: 46px;
        line-height: 23px;
        overflow: hidden;
        &::before { // 将展开/收起文字对齐最右边
          content: '';
          float: right;
          height: calc(100% - 23px);
        }
      }
      .label { // 展开收起文字部分
        position: relative;
        float: right;
        clear: both;
        font-size: 16px;
        padding: 0 8px;
        color: #26caf8;
        border-radius: 4px;
        cursor: pointer;
        &::before { // 默认展开时添加省略号
          content: '...';
          position: absolute;
          left: -5px;
          color: #333;
          transform: translateX(-100%);
        }
        &::after {
          content: '展开';
        }
      }
    }
方法二:通过AntDesign + react实现组件封装
AntDesign默认只有展开功能,没有收起功能,以下是基于Typography组件实现展开收起
组件UI部分
cpp 复制代码
import { Typography } from 'antd';
import React, { useState } from 'react';
import style from './index.less';

const { Paragraph } = Typography;

export type ExpandTextType = {
  rows?: number;
  symbol?: React.ReactNode;
  foldSlot?: React.ReactNode;
  children?: React.ReactNode;
};

const defaultSymbol = () => (
  <span className="ant-typography">
    展开 <i className="iconfont icon-jiantou-shaixuanzhankai"></i>
  </span>
);

const Example: React.FC<ExpandTextType> = (props) => {
  const { rows = 2, symbol = defaultSymbol(), foldSlot } = props;
  const [ellipsis, setEllipsis] = useState(false);
  const [counter, setCounter] = useState(0);
  const onFold = () => {
    setEllipsis(!ellipsis);
    setCounter(counter + 1);
  };
  const onExpand = () => {
    setEllipsis(!ellipsis);
    setCounter(counter + 0);
  };

// 自定义收起文案
  const renderFold = () => {
    return (
      <a className="ant-typography-fold" onClick={onFold}>
        {foldSlot ? (
          foldSlot
        ) : (
          <span>
            收起
            <i className="iconfont icon-jiantou-shaixuanzhankai icon-fold"></i>
          </span>
        )}
      </a>
    );
  };
  return (
    <div className={style['container']}>
      <Paragraph
        key={counter}
        ellipsis={{
          rows,
          expandable: true,
          symbol,
          onExpand,
        }}
      >
        {props?.children}
        {ellipsis && renderFold()}
      </Paragraph>
    </div>
  );
};

export default Example;
组件css
cpp 复制代码
.container {
  :global {
    .ant-typography {
      margin-bottom: 0;
    }

    .ant-typography-expand,
    .ant-typography-fold {
      color: #089cdb;
      font-size: 13px;
      cursor: pointer;
      height: 17px;
      line-height: 17px;
      margin-left: 4px;

      .iconfont.icon-jiantou-shaixuanzhankai {
        display: inline-block;
        font-size: 10px;
        transform: rotate(90deg);
      }

      .iconfont.icon-jiantou-shaixuanzhankai.icon-fold {
        transform: rotate(-90deg);
        margin-left: 4px;
      }
    }
  }
}
页面使用组件
cpp 复制代码
import ExpandText from '@/components/ExpandText'; 
import style from './index.less';

export type ExampleType = unknown;
const Example: React.FC<ExampleType> = () => {
  return (
    <div className={style.container}>
          <ExpandText>这里放入要展示的文案内容啊...</ExpandText>
    </div>
  );
};

export default Example;
相关推荐
abigale0311 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者30 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile34 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399737 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊42 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火42 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能