发表于: 2017-07-02 22:12:51
1 794
今日所做
1.修改职位展示部分的样式,由于display:flex兼容性不是特别好,
打算不使用这个属性去完成这个功能,需要达到的效果是外面的一个
div里面包裹着两个行内元素,屏幕宽度缩小时,行内元素里的文字
不会跳行,显示不出来的部分变为省略号,且行内元素不换行
2.最初的设置是里面行内元素也是div,但是使用display:inline-block
属性,但是这里有一个问题,就是屏幕缩小的时候,两个行内元素还
没被挤压到极限的时候就早早地换行了
3.上网查了一下资料,发现解决这个问题可以是用处理文本中不让
文本换行的方法来解决这个问题,即给外面的div设置white-space:nowrap
属性,强制内部的行内元素不换行
4.行内元素不换行之后,给行内元素设置overflow:hidden,以及
text-overflow:elipse两个属性,可是当屏幕宽度缩小的时候,
行内元素里面的文字并没有变为省略号,只是看不到了而已
5.后来查了查资料,overflow:hidden这个属性的使用原理在于当
元素的宽度小于内部元素或文本的宽度时,把超出的部分隐藏起来,
但是屏幕宽度缩小时,只是屏幕宽度缩小了,行内元素的宽度并没有
随之改变,所以也就不会启动overflow:hidden的效果,给行内元素
宽度设置为百分比,则出现效果
明日计划:
开始做找职位主页的面板
遇到的问题:
暂无
今日收获:
对overflow的使用原理有了更加深入的理解
评论