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;