当flex遇到white-space: nowrap; 排版就飞了的神奇问题 吐血
在做一个移动端排班的时候需要某一行的字超出的部分用省略号代替 然后写着发现后面排版乱了
HTML结构如下 我想让第二个span的内容加省略号
css正确的代码如下
.list {
width: 100%;
.item {
width: 100%;
height: 4rem;
display: flex;
background-color: #eee;
margin: 0.1rem 0;
.left {
flex:;
display: flex;
flex-direction: column;
padding: 0.15rem;
box-sizing: border-box;
min-width:; //就是这行改变了
.one {
flex:;
font-size: 0.36rem;
@extend %juzhong; span {
height: 100%; &:nth-child(1) {
flex: 3;
}
&:nth-child(2) {
flex:;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
如果去掉了15行就会出现下图这种效果
加上排版就好了
至于为什么我也不知道 痛苦~~~~~
望哪位大神知道原因告知一下 跪求
当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布局实现瀑布流排版
网上有很多有关js(jq)实现瀑布流和有关瀑布流的插件很多,例如:插件(Masonry,Wookmark等等).按照正常的逻辑思维,瀑布流的排版(item列表)一般都是 由左到右,上而下排序的结果,单 ...
- 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 遇到white-space:nowrap
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...
- flex mxmlc 手动编译项目
首先: 1.下载flex的sdk,如果你电脑有装flash builder,它自带了一份,位于安装目录的sdks目录下. 备注:(sdk依赖java的jre) 2.配置mxmlc的java运行环境jr ...
随机推荐
- Java问题解读系列之String相关---String类的常用方法?
今天的题目是:String类的常用方法? 首先,我们在eclipse中定义一个字符串,然后使用alt+/就会出现String类的所有方法,如下图所示: 下面我就挑选一些常用的方法进行介绍: 首先定义两 ...
- CesiumLab V1.4 分类3dtiles生成(倾斜单体化、楼层房间交互)我记得我是写过一篇关于倾斜单体化的简书文章的,但是现在找不到了。不过找不到也好,就让他随风逝去吧,因为当时我写那篇文章的时候,就发现了cesium实际是有另一种更高效的单体化。就下面这个示例https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=
我记得我是写过一篇关于倾斜单体化的简书文章的,但是现在找不到了.不过找不到也好,就让他随风逝去吧,因为当时我写那篇文章的时候,就发现了cesium实际是有另一种更高效的单体化.就下面这个示例 http ...
- 解决github下载慢的终极方法
直接用ssr代理,使用全局代理. 下载墙外的软件,都可以,比如 GithubDsktop
- CHARINDEX函数
CHARINDEX函数返回字符或者字符串在另一个字符串中的起始位置.CHARINDEX函数调用方法如下: CHARINDEX ( expression1 , expression2 [ , st ...
- git中的错误
! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'git@gitee.co ...
- 阿里云SaaS生态战略发布:成就亿级营收独角兽
导语:本文中,阿里云智能资深技术专家黄省江从“势”“道”“术”三个方面分享了自己对于SaaS生态的理解,并介绍了SaaS加速器发布以来在产品.技术和商业侧最新的一些进展. 在321北京峰会上,阿里云公 ...
- 2018.8.10 提高B组模拟赛
T1 阶乘 Time Limits: 1000 ms Memory Limits: 262144 KB Detailed Limits Goto ProblemSet Description 有n个正 ...
- Spring Boot → 01:概要
背景 大约20年前,程序员们使用“企业级Java Bean”(EJB)开发企业应用,需要配置复杂的XML. 在二十世纪初期,新兴Java技术——Spring,横空出世.使用极简XML和POJO(普通J ...
- BZOJ 4817数点涂色题解
题目链接 考试考了一道类似的题目,然后不争气的挂掉了,于是跑过来学习这道题的解法... 我还是太菜了.... 我们可以发现任意时刻,原树中颜色相同的点的集合一定是一条链, 即上面这种状态,而这种结构是 ...
- Function相关的小知识
重载 相同函数名,不同参数列表的多个函数,在调用时可自动根据传入参数的不同,选择对应的函数执行.为什么使用重载: 减轻API的名字,减轻调用者的负担.何时使用重 ...