背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响

解决办法,父div设置min-width:0即可

 <div style="width:100%;display:flex;height:80px"><div style="width:50px"><img src="~/Content/Img/2.png" style="height:50px;" /></div><div style="flex:1;min-width:0">
<div style="width:100%;height:40px;text-align:left;font-size:16px">
*******
</div>
<div style="width:100%;height:40px;text-align:left;font-size:14px;padding-left:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
*********
</div>
</div>
<div class="clearfix"></div>
</div>

flex 遇到white-space:nowrap的更多相关文章

  1. dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.

    采用dom4j方式解析string类型的xml xml:        String string="<?xmlversion=\"1.0\" encoding=\ ...

  2. flex 遇上white-space:nowrap的2种解决方法

    需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...

  3. White space is required before the encoding pseudo attribute in the XML declaration.

    错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...

  4. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  5. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  6. 土旦:关于display:flex碰上white-space nowrap 影响布局的问题

    背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...

  7. flex mxmlc 手动编译项目

    首先: 1.下载flex的sdk,如果你电脑有装flash builder,它自带了一份,位于安装目录的sdks目录下. 备注:(sdk依赖java的jre) 2.配置mxmlc的java运行环境jr ...

  8. 使用flex和bison实现的sql引擎解析

    因为老师要求,近期在做oceanbase存储过程的实现,在oceanbase 0.4曾经是不支持存储过程的.实现的主要步骤主要包含 1.语法解析 2.词法解析 3.详细运行语法树的步骤 如今先来说说语 ...

  9. Windows下 flex + bison 小例子

    .下载flex和bison,网址是http://gnuwin32.sourceforge.net/packages/flex.htm 和http://gnuwin32.sourceforge.net/ ...

随机推荐

  1. 工作流-----WorkFlow

    我们都知道对于一个OA系统来说,最重要的也是不可或缺的一个重要环节那就是对于工作流的实现,为此,最近专门在学习如何使用WorkFlow,问前辈,前辈也说道K2工作流引擎挺不错,自己同时也翻阅了一些资料 ...

  2. scss-#{}插值

    一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用. 例如:scss代码 $borderDirection: top !d ...

  3. 【数据库】1.0 MySQL入门学习(一)——常识性知识

    1.0 什么是MySQL(官方发音 My Ess Que Ell)? 是一个快速.多线程.多用户和强壮的SQL数据库服务器,SQL是世界上最流行的标准化数据库语言. 名字来源:共同创办人Monty W ...

  4. jQuery使用最广泛的javascript函数库

    网站建设中,jQuery之最方便的的库了,当用到其中的JavaScript函数库的时候,不禁会想居然还有这么简单的操作? 一.选择网页元素 jQuery的基本设计思想和主要用法,就是"选择某 ...

  5. 利用函数回调获取setInterval中返回的值

    我们都知道,定时器里面想返回值如果你用return根本没作用,那么怎么拿到定时器所返回的值呢, 现在只需要利用回调函数,给主函数传一个函数类型的参数callback,然后把想要返回的num再传给cal ...

  6. canvas玩转微信红包

    CSS3相关属性: <!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'/> &l ...

  7. Java将科学计数法数据转为字符串

    如果Excel单元格数据类型为数值,数字太长会变成科学计数法,Java读取的时候使用如下方法可将其转为字符串 BigDecimal bd = new BigDecimal("3.000085 ...

  8. 关于window的端口查看及tomcat的端口修改问题

    1.Windows平台 在windows命令行窗口下执行: 1.查看所有的端口占用情况 C:\>netstat -ano 协议    本地地址                     外部地址  ...

  9. Aligning Plots in a Column作图列对齐

    Plot[Sin[x], {x, 0, Pi}] Plot[10000 Sin[x], {x, 0, Pi}] 直接作图左边无法对齐,影响图的美观.可以使用左边界空格实现列对齐,代码如下: optio ...

  10. CSS3图片边框

    CSS3图片边框 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似,语法规则: