文本溢出的处理方案

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;
原文地址:https://www.cnblogs.com/lxz-blogs/p/12932222.html