大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。
a name
a info
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.notice 会非常长，一些设备下需要隐藏显示，即不换行，并留下省略符 ... 作标记。
.main {
display: flex;
}
.logo {
width: 100px;
height: 100px;
margin: 10px;
}
.content {
flex: 1;
}
.content > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这里会发现 text-overflow: ellipsis 不生效，省略符根本没有出现。
尝试取消父元素 .content 的 flex: 1 ，无效。
尝试取消 .main 容器的 display: flex ，省略号出现。
因此猜测是 flex 布局的问题，进一步猜测省略符需要对父元素限定宽度。
尝试对父元素 .content 设置 width: 100% 无效，设置 width: 0 可行。即：
.content {
flex: 1;
width: 0;
}
更新：
如果不设置宽度， .content 可以被子节点无限撑开；因此 .notice 总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果。
测试还有一种方法可以达到效果：
给 .content 设置 overflow: hidden ；
以下方法无效：
给 html, body 设置 max-width ，元素似乎能强行撑开页宽；
给 body 设置 overflow ，页宽不能被撑开了，但元素宽度还在，即元素本身还是溢出；
给 html, body 同时设置 max-width 和 overflow ，页宽限定在 max-width 内，元素本身还是溢出；
给 .main 容器设置 overflow: hidden ，同理 .main 是不溢出了， .notice 本身还是溢出；
给 .notice 元素设置 width或max-width ，虽然宽度受限，但在特定宽度下省略符 ... 显示不全，有时只显示两个点 .. 。
以上仅在 chrome 58.0.3029.81 下测试，系统为 Ubuntu 16.04.2 LTS 。
flex 布局下，css 设置文本不换行时，省略号不显示的解决办法
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度.
virtualBox 虚拟机下nginx设置不缓存静态文件不起作用解决办法
最近开发的时候,调整js时会一直使用缓存文件,无法显示改动!nginx配置静态文件add_header Cache-Control no-cache;也不起作用,很苦恼! nginx配置代码:even ...
flex布局下el-table横向滚动条失效
如下图,是一种常见的页面结构,我们可以有很多方法实现,inline-block,float,flex等等 但是,最近项目中遇到一个怪事,左边是侧边栏导航,右边是一个数据展示table,el-table ...
QT5.1在Windows下 出现QApplication: No such file or directory 问题的解决办法
QT5.0.1在Windows下 出现QApplication: No such file or directory 问题的解决办法 分类:编程语言学习软件使用QT编程学习-03-07 ...
Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法
window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap ...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
怎么从传统的盒子思想转为Flex 布局(css)
前端进化很快,总是有新的技术出来,开始可能有些人用惯了盒子模型的思想 依赖display属性 +position属性 +float属性.这三大件.它对于那些特殊布局非常不方便 我们就来看看Fle ...
随机推荐
IE9以下通过css让html页面背景图片铺满整个屏幕
第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下:
Framework7首页隐藏navbar其他页面显示navbar
Framework7首页隐藏navbar其他页面显示navbar 帮别人解决问题,自己也记录一下, 首页.navbar加.navbar-hidden, 首页.page加.no-navbar, 如果首页 ...
php ddos 安全处理代码
仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别，动态更新搜索关键字
仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Frag ...
自己实现的typeOf函数1
自己实现的typeOf函数:返回传入参数的类型 主要用于解决,js自带的typeof返回结果不精确:Ext JS中typeOf对字符串对象.元素节点.文本节点.空白文本节点判断并不准确的问题 js代码 ...
springboot aop 自定义注解方式实现一套完善的日志记录(完整源码)
/wenjunwei/p/9639909.html /tyrant_800/article/details/78 ...
Java之可变参数方法使用说明
代码: package test_demo; /* * 可变参数函数说明 * 传入指定数据类型的数组 * 优先匹配固定长度函数 * */ public class VarArgsDemo { // 可 ...
Vue.js vs React vs Angular 深度对比[转]
这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想要回答的. 客观来说,作为核 ...
UNIX环境高级编程 第3章 文件I/O
前面两章说明了UNIX系统体系和标准及其实现,本章具体讨论UNIX系统I/O实现,包括打开文件.读文件.写文件等. UNIX系统中的大多数文件I/O只需要用到5个函数:open.read.write. ...
