问题描述:flex布局,flex:1下的子元素如果文字超长,并不会按预期“文字超出部分显示为用省略号代替”显示,文字超出部分会撑开容器显示,而不是限制在flex:1的动态剩余的空间中显示
代码重现
提示:你可以先修改部分代码再运行。
针对这个问题,有两个方法可以解决
方法一
根据flex语法,可在设置flex:1的元素(即文字超长元素.tove的父元素)设置宽度属性,如:width:100px; 或 设置min-width:0,2个属性的值可任选其一,宽度值可随意设置,但必须保证小于要限制的显示宽度,否则依旧会被撑开显示
关键的css属性声明及引用代码如下:
<style> .fx1-w{min-width:0;} </style> <div class="box df"> <span>111</span> <div class="fx1 df ai-c fx1-w"> <div class="fx1 fx1-w"> <p>标题</p> <p class="tove">很长的内容很长的内容很长的内容很长的内容很长的内容</p> </div> <i>12345</i> </div> <span>222</span> </div>
方法二
可在设置flex:1的元素(即文字超长元素.tove的父元素)设置overflow:hidden;属性,该属性会触发BFC(块级元素格式化上下文)
关键的css属性声明及引用代码如下:
<style> .fix{overflow:hidden;} </style> <div class="box df"> <span>111</span> <div class="fx1 df ai-c fix"> <div class="fx1 fix"> <p>标题</p> <p class="tove">很长的内容很长的内容很长的内容很长的内容很长的内容</p> </div> <i>12345</i> </div> <span>222</span> </div>
划重点:如果页面布局结构中有嵌套申明使用flex:1,不管是用方法一、方法二都必需在每个设置flex:1的元素上添加方法中上述对应关键的css属性声明才能生效!!!
参考链接
https://blog.csdn.net/zgh0711/article/details/78270555
上一篇: 解决webstorm显示中文难看、丑的问题
下一篇: 快速判断web页面是否在App中打开
1条评论( 网友:1 条,站长:0 条 ) 网友评论{有您的评论更精彩....}