flex 遇到white-space:nowrap
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了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的更多相关文章
- 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=\ ...
- flex 遇上white-space:nowrap的2种解决方法
需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...
- White space is required before the encoding pseudo attribute in the XML declaration.
错误出现的位置: <?xml version="1.0"encoding="UTF-8"?> 正确方式: <?xml version=&quo ...
- 微信小程序中如何实现分页下拉加载?(附源码)
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- 土旦:关于display:flex碰上white-space nowrap 影响布局的问题
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...
- flex mxmlc 手动编译项目
首先: 1.下载flex的sdk,如果你电脑有装flash builder,它自带了一份,位于安装目录的sdks目录下. 备注:(sdk依赖java的jre) 2.配置mxmlc的java运行环境jr ...
- 使用flex和bison实现的sql引擎解析
因为老师要求,近期在做oceanbase存储过程的实现,在oceanbase 0.4曾经是不支持存储过程的.实现的主要步骤主要包含 1.语法解析 2.词法解析 3.详细运行语法树的步骤 如今先来说说语 ...
- Windows下 flex + bison 小例子
.下载flex和bison,网址是http://gnuwin32.sourceforge.net/packages/flex.htm 和http://gnuwin32.sourceforge.net/ ...
随机推荐
- js之cookie操作
1.使用document.cookie保存信息 document.cookie = "Test=cooo";alert(document.cookie); //hours为空字符串 ...
- [转]Tomcat优化之内存、并发、缓存
1.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 JAVA_OPTS 参数. JAVA_OPTS ...
- Django组件——cookie与session
一.会话跟踪技术 1.什么是会话跟踪技术 可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应. 在JavaWeb中,客户向某一服务器发出第一个请求开始,会话就开始了,直 ...
- 集合的前N个元素
集合的前N个元素:编一个程序,按递增次序生成集合M的最小的N个数,M的定义如下: (1)数1属于M: (2)如果X属于M,则Y=2*x+1和Z=3*x+1也属于M: (3)此外 ...
- H5新特性监听手机的返回键
var hiddenProperty ='hidden' in document ? 'hidden' :'webkitHidden' in document ? 'webkitHidden' : ' ...
- git取消本地commit
如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d86c5 ...
- 关于datagridview中checkbox列在选中行的情况下无法操作值
这几天做项目的时候碰到了个小问题,在datagridview中实现对checkbox列的全选和反选功能.代码如下 //全选 if (dataGrid ...
- 【2015 Week Task】
2015 第17周 task:项目语音识别技术整理 2015 第18周 task:项目key技术整理
- 生成centos7 安装脚本
[root@us-1-217 install]# cat gen7.py #!/usr/bin/env python # -*- coding: utf-8 -*- import os, crypt ...
- 配置karma支持Chrome浏览器
准备:项目中已搭建好了karma. 前言:利用vue-cli初始化创建vue项目时,已经搭建好了测试框架 karma+mocha,但是此时karma默认启动的浏览器是 phantomjs,而我想用 C ...