react 多行或单行文本溢出省略显示省略号（...）

需求：

该组件可以显示文本+按钮的形式，也可以显示纯文本的形式。
文本可以为单行或多行，为单行时超过最大宽度显示省略号，在有按钮的情况下，按钮在文本之后显示。为多行文本时，默认超过两行省略，再有按钮的情况下按钮在文本之后显示。
在组件中，定义自定义文本内容：如按钮标签并将此设置为可选参数。定义文本为必传参数。定义行数并设置默认行数为2行，超过两行进行省略。

使用hooks中的useSafeState, useUpdate等
useUpdate：返回一个函数，调用该函数会强制组件重新渲染。
useSafeState：用法与useState 完全一样，但是在组件卸载后异步回调内的 setState 不再执行，避免因组件卸载后更新状态而导致的内存泄漏。

子组件中

1.在index.tsx文件中

interface EllipsisProp {width?: number // 宽度 默认百分之百text: string // 文本内容customView?: ReactDOM //自定义文本rows?: number // 展示几行 默认2行
}

import { useSafeState, useUpdate } from 'ahooks'
import React, { useEffect, useRef } from 'react'const Ellipsis: React.FC<EllipsisProp> = (props) => {// 父组件传来的值const { width, text = '', customView, rows = 2 } = props// 设置初始文本值const [textView, setTextView] = useSafeState('')const ref = useRef<HTMLDivElement>(null)const updata = useUpdate()useEffect(() => {setTextView(text)setTimeout(() => {// 强制渲染updata()}, 30)}, [text])// 总体高度const scrollHeight = ref.current?.scrollHeight || 0// 可视高度const clientHeight = ref.current?.clientHeight || 0return (<Divrows={rows}width={width ? width + 'px' : '100%'}text={text}isExceed={scrollHeight > clientHeight + 5} // 样式判断><div className="text_view" ref={ref}>{scrollHeight > clientHeight + 5 && (<div className="view">{customView}</div>)}<span className="text">{textView}</span></div></ContentArea>)
}
export default Ellipsis

2.在styled.ts中

import styled from 'styled-components'
const Div = styled.div<{width: string // 宽度rows: number // 行数text: string // 文本isExceed: boolean // 样式判断
}>`display: flex;.text_view {width: ${(p) => p.width}; 宽度 父组件传过来的高度line-height: 22px;max-height: ${(p) => p.rows * 22 + 'px'}; // 最大高度 行数* 每一行的高度overflow: hidden;font-size: 14px;color: #262626;&::before {content: '';display: ${(p) => (!p.isExceed ? 'none' : 'inline-block')}; float: right;width: 0px;height: ${(p) => p.rows * 22 + 'px'};margin-bottom: -20px;}.text{whiteSpace: pre-wrap; // 保留空白符序列，但是正常地进行换行。}.view {position: relative;float: right;clear: both;&::before {content: '...';position: absolute;left: 1px;top: -2px;color: #333;transform: translateX(-100%);}}.views {clear: both;display: inline-block;margin-left: ${(p) => (p.text ? '6px' : 0)};}}
`
export { Div }

父组件调用

<Ellipsis text={'测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'} width={319} rows={2}/>

结果：

简单的单行文本超出最大宽度显示省略 …

<span className="font_simall">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</span>

.font_simall {max-width: 200px; 最大宽度display: inline-block;overflow: hidden;white-space: nowrap; 强制不换行text-overflow: ellipsis; 省略
}

简单的多行文本超出最大宽度显示省略 …

.font_simall {width: 215px;display: -webkit-box;word-break: break-all;text-overflow: ellipsis; overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

react 多行或单行文本溢出省略显示省略号（...）相关推荐

vue中多行文本标签_element-ui+vue-cli3.0系列问题三：el-tooltip实现多行，单行文本溢出省略号处理...
大家都知道,对于文本溢出处理,单行溢出处理直接用css就可以处理,但是对于多行文本溢出的话,也可以用css处理,但是由于浏览器的兼容性,所以只能通过js结合css来处理. 点击查看源码. 单行文本溢出 ...
文本溢出处理显示省略号
一.文本溢出处理显示省略号 1.单行文本溢出显示省略号方法1:省略号单行文本: width:200px:设置盒子的宽度(限制宽度) white-space:nowrap:设置文本不换行 overf ...
web 文本溢出处理显示省略号
1.单行文本溢出显示省略号方法1:省略号单行文本: width:200px:设置盒子的宽度(限制宽度) white-space:nowrap:设置文本不换行 overflow:hidden:溢出隐 ...
全局mixin封装文本溢出隐藏显示省略号
全局mixin封装文本溢出隐藏显示省略号 @mixin ellipsis2($line) {display: -webkit-box;overflow: hidden;text-overflow: e ...
svg中如何让文本溢出时显示省略号
svg中如何让文本溢出时显示省略号最近在使用d3.js实现一个树状组织结构图,遇到如下图所示的问题,要求是文本内容固宽,溢出内容应用省略号代替,如果是使用普通html标签实现的话,是比较简单的,ov ...
单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
单行文本溢出省略和多行文本溢出省略
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css单行文本溢出以...显示
固定三句话: /* 不换行 */white-space: nowrap;/* 溢出隐藏 */overflow: hidden;/* 表示文本溢出时显示方式 ellipsis表示圆点 */text-ov ...
css文本溢出隐藏显示省略号
一.单行文本显示省略号 1.先强制文本一行内显示 white-space:nowrap(不换行); 2.超出部分影藏 overflow:hidden; 3.用省略号代替超出的部分 text-overf ...
多行文本溢出省略和单行文本溢出省略
记录下大神文章的地址,下次用的时候方便 http://www.daqianduan.com/6179.html 单行: overflow: hidden; text-overflow:ellipsis ...

react 多行或单行文本溢出省略显示省略号（...）

子组件中

父组件调用

react 多行或单行文本溢出省略显示省略号（...）相关推荐

最新文章

热门文章