背景,做一个前面图片宽度固定,后面宽度自适应,使用到了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. sql查询结果多对多转为一对多返回前端

    企业表 ent_EnterpriseArchives  有id,企业名称 entName veh_Vehicle 车辆表,有所属企业id  companyId,车辆id,车牌号licPlate 目的是 ...

  2. 深入理解 Java 内存模型(转载)

    摘要: 原创出处 http://www.54tianzhisheng.cn/2018/02/28/Java-Memory-Model/ 「zhisheng」欢迎转载,保留摘要,谢谢! 0. 前提 &l ...

  3. 有关satement与preparedstatement

    satement 用于写入数据,例子如下: connection conn=DBHelper.getConnection(); Statement stmt=conn.createStatement( ...

  4. caffe-windows之彩色图像分类例程cifar10

    一.caffe-windows之彩色图像分类例程cifar10 训练测试网络模型[参考1][参考2] 1. 准备数据 下载二进制数据集数据集,下载链接为http://www.cs.toronto.ed ...

  5. sketchup 与 ArcGIS 10 的交互(转)

    来自:http://blog.csdn.net/kikitamoon/article/details/9036347 许多用户在 ArcGIS 9.2 时代习惯于使用 Sketchup 插件,但是,9 ...

  6. .NET开源工作流RoadFlow-表单设计-附件管理

    在表单中添加一个附件管理的控件: 文件类型:指定可以上传的文件类型.

  7. linux注册服务教程

    该说明是项目完成很久之后,整理资料时的偶然发现,当时所操作的linux为中标麒麟,需要对项目进行开机自启,对llinux还不熟悉,找不到linux中的服务自启设置.辗转多次才找到了解决方案.记录以供参 ...

  8. matlab练习程序(单源最短路径Dijkstra)

    图的相关算法也算是自己的一个软肋了,当年没选修图论也是一大遗憾. 图像处理中,也有使用图论算法作为基础的相关算法,比如图割,这个算法就需要求最大流.最小割.所以熟悉一下图论算法对于图像处理还是很有帮助 ...

  9. 使用canvas来绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. spring框架入门day02

    0. 绪论 在第二天的学习中的学习JdbcTemplate之前,想要下载最新版本的mysql server8.0.11 结果在将所有的东西配置好后,发现报错, · Establishing SSL c ...