css中的overflow | 七日打卡

256 阅读2分钟

关于css中的overflow,这个问题还算蛮多的,主要就是讲的页面中的一个元素因其太大而无法在给定的范围内完全显示时,需要我们对其进行操作以达到相应的目的。这时我们就需要用到这个属性(overflow)了,它包括overflow-x和overflow-y,overflow是其简写的形式。

在今天就大概的梳理下这个属性,let's go!

要使用overflow的前提是确保该元素具有以下特征:

1.块级元素

2.white-space为nowrap 的元素

overflow有visible, hidden, scroll, auto等四个属性值。

visible是默认值,其中的内容是可以超出其父元素的。我们需要解决的就是这个问题。overflow设置为hidden的时候,当其内容超过父元素的时候会被裁减掉;设置为scroll的时候内容会在父元素的范围内显示,但是可以滚动,这个属性在不同设备的问题很多,需要具体问题具体处理;设置为auto的时候,顾名思义,就是当内容超过范围了会自己发生滚动。

overflow-x负责的是水平方向,overflow-y负责的是垂直方向。下面举几个简单的问题:

水平滚动问题

当元素的position值为absolute或fixed值时,就有可能导致水平滚动。当left,right值中的一个将元素定位在body元素外部时,可能会发生这种情况,要解决这个问题,首先需要检查为什么这个元素被放置在viewport之外。如果没有必要,则必须删除它或编辑position值。

长词和链接

处理内容中的长字或链接时,它应该换行,否则,将会出现水平滚动。为了解决这个问题,我们需要中断长单词和链接。我们可以这样做。

.content a {

word-wrap: break-word;

}

或者我们可以使用text-overflow:

.content a {

overflow: hidden;

text-overflow: ellipsis;

}

手机上的滚动

由于手机的系统,版本等各种因素的影响,问题颇多。比较好的有betterscroll和iscroll插件,基本上大多数问题都可以解决了。 第三天,over~