React使用HOC搭建后台模板时HomeScreen组件p标签内容溢出屏幕如何解决

问题原因 #

• 你的<p>标签内容为无空格的连续长字符串，浏览器默认不会对这类文本自动折行，会直接撑开父容器宽度
• HomeTemplate的flex布局容器未设置宽度限制，右侧承载组件的div没有配置flex占比和溢出规则，会被内部内容撑出超出屏幕的宽度
• HomeScreen外层div设置的width: 100%是相对于父元素宽度，父元素本身已被撑溢出，所以该100%宽度也会超出屏幕范围

修复方案 #

1. 修改HomeTemplate中的flex布局代码：

// 原flex容器代码替换为以下内容
<div style={{display:'flex',flexDirection:'row',minHeight:'100vh', width: '100%', boxSizing: 'border-box'}}> 
  <div style={{width: '30%', flexShrink: 0}}>
    <SideBar />
  </div>
  <div style={{flex: 1, overflow: 'auto', boxSizing: 'border-box'}}>
    <Component {...propsRoute} />
  </div>
</div>

修改说明：

• flex容器新增width: 100%，约束整体宽度不会超出父级范围
• 侧边栏容器新增flexShrink: 0，防止侧边栏被内容挤压变形
• 右侧内容容器设置flex: 1自动占满剩余宽度，新增overflow: auto，内容超出时内部滚动，不会撑开容器宽度

2. 给HomeScreen中的<p>标签添加折行规则：

<p style={{wordWrap: 'break-word', wordBreak: 'break-all'}}>asasasasasdsadsadsadsadasasdsadasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdassasdasdasdasdgdfgdf</p>

wordWrap: 'break-word'和wordBreak: 'break-all'会强制连续长文本在容器边缘自动折行，不会超出容器宽度。

修改完成后即可解决内容溢出问题。

内容的提问来源于stack exchange，提问作者Minh Huy