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

<div ng-repeat="item in lawInfo">
     <div class="weui-cells__title sectionTitle">{{item.sectionTitle}}</div>
         <div class="weui-cells">
              <div class="weui-cell cell" ng-repeat="data in item.arr">
                     <div class="weui-cell__bd cell_title" ng-hide="data.NOTITLE">
                             <p>{{data.TITLE}}</p>
                     </div>
             <div class="weui-cell__ft cell_content">{{data.CONTENT}}</div>
          </div>
       </div>
</div>

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 属性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,110评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,349评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,815评论 0 2
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,651评论 0 26