当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 ...
随机推荐
- cvc-elt.1: 找不到元素 'beans' 的声明。springmvc netbeans maven
搭建最基本的框架,出现问题,提示cvc-elt.1: 找不到元素 'beans' 的声明. HTTP Status 500 - Servlet.init() for servlet spring th ...
- echarts 重新渲染(重新绘制,重新加载数据)等
- Vue--系统指令(基础)
Vue概念:vue是mvvm模式的,直接操作dom开销较大,先获取dom,修改里边的内容,但是用vue的话,直接视图和模型绑定,不管是视图的数据发生改变还是模型的数据发生改变,其都是关联的,不需要直接 ...
- void 运算符
void 是 javascript 的操作符,意思是:只执行表达式,但没有返回值.该表达式会被计算但是不会在当前文档处装入任何内容,void其实是javascript中的一个函数,接受一个参数,返回值 ...
- 蚁群算法MATLAB解VRP问题
Excel exp12_3_2.xls内容: ANT_VRP函数: function [R_best,L_best,L_ave,Shortest_Route,Shortest_Length]=ANT ...
- !important覆写css行内样式
<div class="block"> <span style="font-weight: bold; color: red;">Hel ...
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- vue中is的作用和用法
回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...
- PSPP:顶替SPSS常用功能的优秀软件, Linux 下的经济学用软件
几个替代SPSS的软体Salstat http://salstat.sourceforge.net/PSPP http://www.gnu.org/software/pspp/pspp.htmlR h ...
- WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中)
原文:WPF/Silverlight深度解决方案:(七)HLSL自定义渲染特效之完美攻略(中) 通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过 ...