首页 > 其他 > 详细

文本溢出的处理方案

时间:2020-05-21 18:55:56      阅读:66      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!