楼主有个需求，Span标签内容超过2行，就隐藏剩余文本，第二行文本末尾省略号表示，这就需要一个显示更多 / 收起 的控制开关了
那我们怎么知道文本到底有几行呢？
实现原理是：行数 = 文本总高度 / 文本实际行高（非单纯的lineHeight，而是包含margin, padding）
然后我们需要一个隐藏且绝对定位脱离文档流的同样内容的标签，这个标签是不让用户看到的，只是为了方便计算文本总高度而存在
{/* 拷贝标签，计算文本行数， 行数 = 文本总高度 / 每行文本高度 */}
// 假的文本标签
className="hiddenContent" style={{ position: 'absolute', zIndex: -1, visibility: 'hidden' }} > {content} // 实际文本标签 {!!isNeedShowMore && ( {this.state.isShow ? '收起' : '显示更多'}
)}
核心代码：
computeLineCount = () => {
const { currentIndex } = this.props
const hiddenContent = document.getElementsByClassName('hiddenContent')[
currentIndex
] // 该文本所在的标签 因为标签很多，所以需要制定索引值Index
// 获取实际文本样式（包含lineHeight和height,fontSize等等）
let style = window.getComputedStyle(hiddenContent, null)
let fontSize = style.fontSize
let lineHeight = (style.lineHeight === 'normal'
? fontSize
: style.lineHeight
).replace('px', '')
let height = style.height.replace('px', '')
// console.warn('lineHeight, height:', lineHeight, height, height / lineHeight)
if (height / lineHeight > 2) {
this.setState({ isNeedShowMore: true })
} else {
this.setState({ isNeedShowMore: false })
}
}
以下是具体实践代码：
CustomCard.js
import React from 'react'
import styles from './card.less'
export default class extends React.Component {
constructor(props) {
super(props)
this.state = {
isShow: false,
isNeedShowMore: true,
}
}
componentDidMount() {
this.computeLineCount()
}
computeLineCount = () => {
const { currentIndex } = this.props
const hiddenContent = document.getElementsByClassName('hiddenContent')[
currentIndex
]
// 获取实际文本行高
let style = window.getComputedStyle(hiddenContent, null)
let fontSize = style.fontSize
let lineHeight = (style.lineHeight === 'normal'
? fontSize
: style.lineHeight
).replace('px', '')
let height = style.height.replace('px', '')
// console.warn('lineHeight, height:', lineHeight, height, height / lineHeight)
if (height / lineHeight > 2) {
this.setState({ isNeedShowMore: true })
} else {
this.setState({ isNeedShowMore: false })
}
}
showMore = () => {
const { isShow } = this.state
const { currentIndex } = this.props
const contentWrap = document.getElementsByClassName('contentWrap')[
currentIndex
]
if (contentWrap) {
if (!isShow) {
contentWrap.style.overflow = 'visible'
contentWrap.style.webkitLineClamp = 'unset'
} else {
contentWrap.style.overflow = 'hidden'
contentWrap.style.webkitLineClamp = '2'
}
this.setState({ isShow: !isShow })
}
}
juadgePlatForm = () => {
var u = navigator.userAgent
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
return 'Android'
//安卓手机
} else if (u.indexOf('iPhone') > -1) {
return 'iPhone'
//苹果手机
} else if (u.indexOf('Windows Phone') > -1) {
//winphone手机
return 'Windows Phone'
}
}
render() {
const { title, content, currentIndex } = this.props
const { isNeedShowMore } = this.state
let leftSize = '8px'
if (currentIndex > 8 && currentIndex < 99) {
const platform = this.juadgePlatForm()
leftSize = platform === 'Android' ? '5px' : '5.7px'
}
if (currentIndex > 98) {
leftSize = '2px'
}
return (
style={{ position: 'relative', width: '10%', marginRight: '5px', }} > style={{ position: 'absolute', top: '1px', left: leftSize, color: 'white', fontSize: '12px', }} > {currentIndex + 1} src="https://img-blog.csdnimg.cn/2022010701433423128.png" style={{ width: '28px', height: '23px' }} />
style={{ width: '90%', }} > {title}
{content} {/* 拷贝标签，计算文本行数， 行数 = 文本总高度 / 每行文本高度 */} className="hiddenContent" style={{ position: 'absolute', zIndex: -1, visibility: 'hidden' }} > {content} {!!isNeedShowMore && ( {this.state.isShow ? '收起' : '显示更多'} )}