最近在项目中遇到使用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. PIC IDE编译器变量问题

    1.用const关键字是不能把变量定义到ROM区域的,在IDE编译器里要在变量的定义前面加入rom关键字.例如: rom char tmp[257]={0};const rom char tmp[25 ...

  2. vc++ 6.0编译后生成的文件

    程序在编译后,在目标路径下会生成多个文件    Debug文件夹(*.exe,*.ilk,*.obj,*.pch,*.pdb,*.idb,*,pdb),*.cpp,*.dsp,*.ncb,*.plg  ...

  3. 【转】【C++】【MFC】关于RADIO BUTTON的使用方法

    *原文地址:http://blog.csdn.net/c_cyoxi/article/details/23868979 1. 环境:VS2010 2. 分组 将radio1.radio2.radio3 ...

  4. docker使用centos7系统构建tomcat镜像

    FROM shansongxian/centos-oraclejdk8:latest #此镜像使用centos7系统,精简jdk,只运行java程序,无法编译/构建 MAINTAINER huqian ...

  5. 更新KB915597补丁后导致“您的windows副本不是正版”的解决方案

    更新KB915597补丁后导致“您的windows副本不是正版”的解决方案 解决方法: 运行cw.exe(https://pan.lanzou.com/i05ya8h),直至提示成功: 重新启动操作系 ...

  6. Exceptions and Errors on iOS

    异常:程序缺陷导致:不可恢复:给开发者使用: 错误:资源受限导致:可恢复:提示给用户. https://blog.jayway.com/2010/10/13/exceptions-and-errors ...

  7. mongodb索引 全文索引

    全文索引,也叫文本索引,平时,我们百度的搜索,比如api文档的搜索,这种全局的索引就可以使用全文索引实现 全文索引:对字符串与字符串数组创建全文可搜索对索引 使用情况:比如有一个数据集合,存储了用户的 ...

  8. flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)

    如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span ...

  9. Github的基本功能

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Fadeoc Khaos链接:http://www.zhihu.com/question/20070065/answer/30 ...

  10. kubernetes-控制器Deployment和DaemonSet（八）

    Pod与controllers的关系 •controllers:在集群上管理和运行容器的对象•通过label-selector相关联•Pod通过控制器实现应用的运维,如伸缩,升级等 控制器又称工作负载 ...