最近在项目中遇到使用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. Vue汇总（搬砖）

    掘金: https://juejin.im/ Element: http://element-cn.eleme.io/#/zh-CN 验证码GEETEST---极验 : https://docs.ge ...

  2. Error和Exception的区别？

    Error和Exception都继承自Throwable类 二者不同之处在于: Exception: 1.可以是可控制的(checked)或是不可控制的(unchecked) 2.表示一个有程序员编写 ...

  3. java基础概念整理综合 及补充（jdk1.8）

    2018 java基础 笔记回顾摘要 一 1,html 与 注释: <!--   -->  注释不能嵌套 代码都得有注释. 2,空格符:   3,css选择的优先级: id选择器 > ...

  4. linux 命令——30 chown (转）

    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...

  5. IOS 控件器的创建方式（ViewController）

    ● 控制器常见的创建方式有以下几种 ➢ 通过storyboard创建 ➢ 直接创建 NJViewController *nj = [[NJViewController alloc] init]; ➢ ...

  6. 【洛谷1337】[JSOI2004] 吊打XXX（模拟退火经典题）

    点此看题面 大致题意: 一个平面上有\(n\)个点,每个点有1个权值,现在要选择平面上的一个点,使这\(n\)个点的权值乘上到达选定点的距离之和最小. 模拟退火 我们可以用模拟退火来做这道题. 先将\ ...

  7. 设置RichTextBox控件的文本的对齐方式

    实现效果: 知识运用: RichTextBox控件的SelectionAlignment属性 //获取或设置在当前选择或插入点的对齐方式 public HorizontalAlignment Sele ...

  8. 2018.2.7 css 的一些方法盒子模型

    css 的一些方法 1.盒模型代码简写 盒模型的外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左.具体应用在margin ...

  9. pymysql 简单操作数据库

    #!/usr/bin/env python #-*- coding:utf-8 -*- # author:leo # datetime:2019/4/24 15:22 # software: PyCh ...

  10. Sql中的if函数学习

    今天,在修改项目bug时遇到一些需要计算的功能实现,虽然可以用java代码写,但是由于时间较为充裕,有尝试用sql写一下,学习到了if函数 , o.containerSendNet),) transi ...