发表于: 2017-07-02 22:12:51

1 793


今日所做

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的使用原理有了更加深入的理解


返回列表 返回列表
评论

    分享到