React列表中实现文案多行收起展开的功能

css实现

在我们平时的业务开发中经常会用到文案超出只有收起，点击在展示全部文案；通常的使用时使用css来实现

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如下：

使用css实现时只能做多行的省略，也没法根据文字去添加定制化的按钮去实现展开收起的功能，这个只是适合特定要求不是很高的场合下使用。

字符串截取

另一种方法是使用字符串截取的方案

_renderContent = item => {const { content, id } = item;if (content.length > 69) {return (<div><div ref={id} className="content">{content.slice(0, 69)}</div><divclassName="content-btn"ref={id + 'btn'}onClick={() => {this.handleContent(item);}}>全文</div></div>);} else {return <div className="content">{content}</div>;}
};

展示效果：

弊端：

数字、中文字符和引文字符的宽度是不一样的，在使用字符串截取是很容易出现如上的偏差，并且每个手机的分辨率不一样，字符渲染的宽度像素也是不同的，这样也会导致误差；所以字符串截取也不是一种很好的方案。

最终实现方案

话不多说直接上代码：content组件

js代码：

import React from 'react';
import cs from 'classnames';import './style.scss';
export default class TextContainer extends React.Component {constructor(props) {super(props);this.state = {content: props.content,showAll: false,btnText: '全文',needHidden: false //  文字超出4行 需要隐藏};}/*** @description: 处理content文案的点击展开收起* @return: null*/handleContent = e => {e.stopPropagation();let { showAll } = this.state;this.setState({showAll: !showAll});};// 判断文本超出行数isElementCollision = (ele, rowCount = 4, cssStyles, removeChild) => {if (!ele) {return false;}const clonedNode = ele.cloneNode(true);// 给clone的dom增加样式clonedNode.style.overflow = 'visible';clonedNode.style.display = 'inline-block';clonedNode.style.width = 'auto';clonedNode.style.whiteSpace = 'nowrap';clonedNode.style.visibility = 'hidden';// 将传入的css字体样式赋值if (cssStyles) {Object.keys(cssStyles).forEach(item => {clonedNode.style[item] = cssStyles[item];});}// 给clone的dom增加id属性let _time = new Date().getTime();const containerID = 'collision_node_id_' + _time;clonedNode.setAttribute('id', containerID);let tmpNode = document.getElementById(containerID);let newNode = clonedNode;if (tmpNode) {document.body.replaceChild(clonedNode, tmpNode);} else {newNode = document.body.appendChild(clonedNode);}// 新增的dom宽度与原dom的宽度*限制行数做对比const differ = newNode.offsetWidth - ele.offsetWidth * rowCount + 40;// console.log(differ, 'differ');if (removeChild) {document.body.removeChild(newNode);}return differ > 0;};componentDidMount = () => {const cssStyles = { fontSize: '0.9375rem', fontWeight: '400', lineHeight: '1.5625rem' };// console.log(this.isElementCollision(this.refs['content'], 4, cssStyles, true));let needHidden = this.isElementCollision(this.refs['content'], 4, cssStyles, true);this.setState({needHidden});};render() {let { content, needHidden, showAll } = this.state;let { headerText } = this.props;return (<div><divref={'content'}className={cs('content', { 'hidden-text': !showAll && needHidden })}>{headerText ? headerText() : null}{content}</div>{needHidden && (<divclassName="content-btn"onClick={e => {this.handleContent(e);}}>{!showAll ? '全文' : '收起'}</div>)}</div>);}
}

css代码：

$baseFontSize:32px !default;// pixels to rems
@function pxToRem($px) {@return $px / $baseFontSize * 1rem;
}.content {font-size: pxToRem(30px);font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(0, 0, 0, 1);line-height: pxToRem(50px);}.hidden-text {display: -webkit-box;-webkit-line-clamp: 3;/*! autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */overflow: hidden;
}.content-btn {font-size: pxToRem(28px);font-family: PingFangSC-Regular, PingFang SC;font-weight: 600;color: rgba(162, 116, 56, 1);line-height: pxToRem(48px);margin-top: pxToRem(10px);
}

引用：

import TextContainer from '@/textContainer';
_renderContent = item => {const { content, id } = item;return <TextContainer content={content} />;
};

效果：

总结

以上是本人在平时开发中使用的方式，希望对大家有所帮助，如果老铁们有更好的方案可留言展示一下。

React列表中实现文案多行收起展开的功能相关推荐

【云原生】在 React Native 中使用 AWS Textract 实现文本提取
⭐️ 本文首发自前端修罗场(点击加入),一个专注 Web 技术.答疑解惑.面试辅导.职业发展的社区.现在加入,即可参与打卡挑战,和一群人一起努力.挑战成功即可获取一次免费的模拟面试机会,进而评估知识 ...
python3判断变量存在_Python3基础 list in/not in 判断一个变量是否在列表中存在
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
js实现文字收起展开功能
大家在工作中经常会用到文字收起展开的功能,如下图: 接下来直接上代码: html部分 <style>.box{width: 300px;border: 1px solid #000;min ...
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行（drop multiple rows in dataframe with integer index）
pandas使用drop函数删除dataframe中指定索引列表对应位置的数据行(drop multiple rows in dataframe with integer index) 目录
pandas使用query函数查询dataframe指定数据列的内容（数值）不包含在特定列表中的数据行（not contain in list)
pandas使用query函数查询dataframe指定数据列的内容(数值)不包含在特定列表中的数据行(select rows which column values are not containe ...
pandas使用query函数查询dataframe指定数据列的内容（数值）包含在特定列表中的数据行（select rows which column values contain in list)
pandas使用query函数查询dataframe指定数据列的内容(数值)包含在特定列表中的数据行(select rows which column values contained in a li ...
不出现php version网页_php冷知识 - 从命令行参数列表中获取选项
分享一个php的冷知识 - ,从命令行参数列表中获取选项用到的函数是getopt 说明函数签名是这样的 getopt ( string $options [, array $longopts [, ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
python读文件每一行-Python文件内容按行读取到列表中
Python文件内容按行读取到列表中示例文件内容如下: Hello World Python 通常来讲,我们如果只是迭代文件对象每一行,并做一些处理,是不需要将文件对象转成列表的,因为文件对象本身可 ...

React列表中实现文案多行收起展开的功能

css实现

字符串截取

最终实现方案

总结

React列表中实现文案多行收起展开的功能相关推荐

最新文章

热门文章