flex 布局文字过长不换行

问题描述

当我使用 flex 布局做两栏布局的时候，左侧宽度固定，右侧宽度使用 flex: 1，文字溢出，如图

明显文字溢出了

代码

  
  
  
  


  

    
what:
    

      dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    
  

问题解析

右侧内容为没有空格的纯英文，浏览器会把它当成是一个单词，所以不换行并溢出

解决方案

1. 给右侧加 css 使其无论如何都拆分单词

word-break: break-all;

2. 不是没有空格的纯英文，就一点事都没有了（当然，这根本不是什么解决方案）

  
  
  
  


  

    
what:
    
如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？如果我是中文我是不是就万事大吉了 ？？？
  

中文

总结

使用 flex 做两栏布局时，在溢出的一栏使用如下 css 使文本内容强行在任意字符间断行就 ok 了

word-break: break-all;