内容超出div,设置滚动条

当内容超出div时,自动出现滚动条的条件:1、内容必须在div中；2、div要设置宽高；3、overflow 设置 auto；

备注：

1、overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条；
2、overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条；
3、overflow-y:auto;当内容宽度超出div高度，自动出现垂直滚动条；
注意：设置好后会自动换行；white-space:nowrap;  这个会强制文字在同一行显示

注意：
当 div 中的内容是文字时，当文字长度超出div宽度时是不会出现横向滚动条的，即使设置了 overflow:auto; 或者 overflow-x:auto; 。原因是当文字长度超出 div 宽度时，会自动换行。
解决办法：
在设置了 overflow:auto; 或者 overflow-x:auto; 的同时，还得设置 white-space:nowrap; 。white-space:nowrap; 会强制文字在同一行显示；

内容超出div,设置滚动条相关推荐

CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度如图: 1.自动换行 <div style="widht:100%;height:100%;wo ...
内容超出DIV宽高后隐藏或出现滚动条和overflow的属性
div{overflow:hidden} 这样设置后,假如DIV对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片. overflow 一共有5个属性 ...
div设置滚动条和滚动条属性
当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置滚动条相关的属性. <style tyle="text/css" ...
div 设置滚动条每次打开定位在最下方
<div class="help-gundongtiao" style=" height:350px; overflow:auto"> <ul ...
div超出部分出现滚动条并修改滚动条的默认样式
使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条. overflow 设置包括水平和竖直方向内容溢出时的操作 overflow-x 设置水平方向内容溢出时的操作 o ...
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果,可以设置div的css样式为overflow:auto,当overflow取值为auto时,如果内容被修剪,则浏览器会显示 ...
css给超出内容设置滚动条和去除滚动条显示：
盒子内部元素溢出自动生成滚动条,使用: overflow: scroll; .drawerBox{width: 300px;height: 500px;border: 1px solid red;o ...
CSS内容超出元素高度滚动，并且滚动条隐藏
CSS内容超出元素高度滚动,并且滚动条隐藏给父元素设置宽度,溢出隐藏,子元素设置 // html <div class="box"><div class=&qu ...

内容超出div,设置滚动条

内容超出div,设置滚动条相关推荐

最新文章

热门文章