1.单行文本溢出 css方案
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2.多行文本溢出
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
word-break: break-all;
white-space: normal;
-webkit-line-clamp: 2;
3.加载更多方案(自己想的方案)
设置固定高度,设置文本固定高度,隐藏超出范围文本,对比可见高度和实际高度 如果需要展开 修改可见高度
<div className="fontbox2" ref={this.fontbox}> 3213213124235456756876gdffsdasdascsiuhiudncjkncsancsdncidqjwijdoisadasmxksoaijaosijxoaidqjwiojdsxapokpoasxpoajpodjaijaosijxoaidqjwiojdsxapokpoas
</div>
<button onClick={this.zhankai}>展开</button>
fontbox=createRef()
zhankai=()=>{
const clientHeight=this.fontbox.current.clientHeight
const scrollHeight=this.fontbox.current.scrollHeight
if(clientHeight<scrollHeight){
this.fontbox.current.style.height=`${scrollHeight}px`
}
}
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;