flex 设置等比宽度出现长字符串宽度不同处理

flex布局，功能强大，具体的基本知识这边就不阐述了，从阮一峰老师的网络日志--> Flex 布局教程：语法篇处可以获取。这边直接说明问题所在

问题展示

在同一个ng-repeat 循环中出现的列表样式中，其中一个cell没有如设置的宽度和换行，其余的都正常

CSS

/*容器设置*/
.weui-cell {
    padding: 10px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
/*项目设置*/
.weui-cell .cell_title {
    flex: 1;
    font-size: 15px;
    white-space:nowrap;
}
.weui-cell .cell_content {
    flex: 2;
    font-size: 14px;
    text-align: left;
}

HTML

     
{{item.sectionTitle}}
         

              

                     

                             
{{data.TITLE}}
                     
             
{{data.CONTENT}}
          
       

JS中没有对样式进行任何修改，这边所有的cell-content都应该是一样的CSS设置。在该滑动页面中，所有出现这个问题的cell与其他的区别在于：
含数字、英文的长字符串，不包括 '、' 、 ' -'等区分符号，在需要换行的时候没有换行，导致宽度与其他cell不同
看出区别找解决方案就容易多了，应该是在文本换行设置的地方出现了问题。

解决

word-break 默认设置的话，在出现长单词的话，不会进行换行。在例如网址字符串：http://www.baoan.gov.cn/xxgk/xxgkgz/qbmxxgkml/qzfbgs/xxgk_112876/xzfysq这种默认无法断字进行换行，而比如、 - 。等是可以换行的。所以需要在长单词的情况下进行换行处理，必须在项目设置中加上

 word-break: break-all;

即可

参考文章

Flex 布局教程：语法篇
flex布局踩过的那些坑
CSS3 word-break 属性