最近在项目中遇到使用flex的时候，在flex-item元素中使用text-overflow:hidden；white-space:nowrap；进行省略文字的操作。

发现flex-item失控了，长度完全根据子元素中的文字决定，把其他同级元素挤跑。

最后求助网友，得到解决办法：

1.给flex-item元素增加min-width:0

flex遭遇text-overflow:hidden，white-space:nowrap的更多相关文章

  1. td之overflow:hidden 多余文本隐藏效果

    td之overflow:hidden 多余文本隐藏效果 方法1: table-layout: fixed; width: 200px; 语法: table-layout : auto | fixed ...

  2. 在项目中遇到关于 CSS Overflow Hidden在iPhone & Safari不起作用

    调试了半天 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m ...

  3. 当鼠标hover的时候，使用tip将overflow:hidden隐藏的文字显示完全

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  5. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  6. CSS Overflow:hidden

    终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...

  7. 清除浮动2-父元素设置overflow:hidden

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  8. td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效，英文 数字 不换行 撑破div容器

    我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...

  9. overflow: hidden用法，不仅仅是隐藏溢出

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...

随机推荐

  1. Eucalyptus（v4.0）系统需求

    1.计算需求 Physical Machines: All Eucalyptus components must be installed on physical machines, not virt ...

  2. 【Oracle】曾经的Oracle学习笔记（1-3） 数据库常见用语，常见命令，创建测试表

    一.数据库的登录 二.数据库常用语 三.测试表的创建,测试数据初始化 四.常见命令介绍 五.测试 user:jeffreysn:jeffrey user:systemsn:jeffrey 浏览器中输入 ...

  3. 详细讲解：tp3.2.3生成验证码并进行验证（ajax校验返回及自定义返回）

    TP3.2.3的验证码也是比较经典的小功能,框架对这个小功能的封装还是比较完美的,废话不多说,开始记录 1.总体效果: (1)初始界面 (2)自定义的返回校验效果: (3)ajax的校验返回: 2.代 ...

  4. 域名设置A记录或CNAME记录，但无法被解析，可能是因为状态为：clientHold

    解决方案: 访问https://whois.aliyun.com/查询域名状态是否为“注册商禁止解析”: 若是,联系注册商根据对方要求进行操作以便解除. https://icann.org/epp#c ...

  5. MovieReview—Avengers: Infinity War(复仇者联盟3：无限战争)

    Antagonist? Thanos,the central figure of the Avengers 3,antagonist. Everyone has his own ideals and ...

  6. java poi读取excel公式，返回计算值（转）

    http://blog.csdn.net/CYZERO/article/details/6573015 经测试,确实可以 1 package hrds.zpf.poi;  2  3  import o ...

  7. python_75_json与pickle序列化2

    import pickle def say(name):print('Hi!',name)#用完会释放,要想反序列化,要重新写上该函数 info={ 'name':'Xue Jingjie', 'ag ...

  8. 详解----memcache服务端与客户端

    Memcache是danga.com的一个项目,用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建 ...

  9. dataTable 自定义排序

    $("#id").DataTable({ aaSorting: [0, 'desc'], // 默认排序 aoColumnDefs: [ {
 "bSortable&qu ...

  10. 十、Shell 函数

    Shell 函数 linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. shell中函数的定义格式如下: [ function ] funname [()] { action ...