CSS 是坑

1. 单行文本省略问题

大致是有一个 main 容器是 flex 布局，左边一个 logo 固定宽高，右边 content 动态宽度。

a namea infoLorem 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;}

参考

2.1 IOS 表单元素点击自带背景阴影

最近一直做移动端前端开发，发现一个神奇的东西，对于IOS下的，input或者label元素，

点击之后，总是会出现一个背景阴影的现象。

之前一直怀疑是Fastclick这个哥们搞的鬼，最后查了fastclick的源码，fastclick并没有对它进行过处理，最后发现是IOS系统自带的背景色。需要消除的话，只需要一行CSS代码即可：

在你需要消除效果的元素上加上：

//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)-webkit-tap-highlight-color:rgba(0,0,0,0);

1

2

接下下，一切又恢复了平静。