css中的内容溢出
来源:互联网 发布:免费发贴软件 编辑:程序博客网 时间:2024/05/22 15:42
内容溢出是指当设置好了一个层的宽和高后,由于内容比较多的缘故,导致内容溢出了设定好的宽度和高度。实例如下:
效果如下:
可以明显的看到文章的内容溢出了设定好的边框, 这就是内容溢出的问题。
内容溢出的解决方法有多种,但是我们要找到最合适的解决方法:
在css中有个属性 overflow专用于解决内容溢出方面的问题。
overflow有一下几个值 visible是默认值,既不处理。 scroll添加滚动条,实例:
效果如下:
能够看到 右边和下边都加上了滚动条,大家有没有感觉这种效果很难看!! 并且左右滚动条还不符合大家的使用习惯,所以这种效果一般不用。
auto为自动,既当内容超出时加上滚动条,不超出时则不加。把上边代码的scroll 改为 auto 我们就可以看到效果如下:
可以看到下半框上的左右滚动条没有了,这样就好看点了,可是这种效果其实还是不太理想。
我们可以试试这个属性 hidden 这个属性的设置是 把超出的部分给隐藏了,这样可以大大的加强网页的美观,事实上许多网站也是这样设计的。我们现在把 auto改为 hidden看下效果:
看到超出的部分被隐藏了,这种效果是最佳的效果。
当需要边框的宽度随着内容的增加而增加时,我们可以有一下几种做法:
1.不设置边框的高 既height属性我们看下效果:
可以看到高随着内容变大了,这是在火狐浏览器中的效果,这种效果在不同的浏览器中有不同的效果,要想在所有浏览器中都有这中效果 我们就需要这样来做 把 height:auto; overflow:auto; 这样所有的浏览器中效果就会一样了。
- css中的内容溢出
- CSS解决内容溢出
- css内容溢出显示省略号
- css处理标签内容溢出
- CSS 文本内容溢出 解决方法
- CSS overflow显示内容溢出
- css+div如何解决内容的溢出
- CSS的内容溢出和剪裁:overflow
- css中的溢出文本和文本对齐
- CSS让表格的溢出内容隐藏起来
- CSS控制文本内容长度,溢出追加省略号
- css控制溢出内容 用省略号代替显示
- datagrid表格内容溢出用"..."处理的css
- 使用CSS属性对文本溢出内容隐藏
- 替换css 文件中的内容
- div中的内容溢出后以省略号结尾
- DIV+CSS页面设计中的IE6的文字溢出BUG
- DIV+CSS页面设计中的IE6的文字溢出BUG
- 面向对象程序设计之体会
- sicily1344数列
- 关于使用QRcode.jar生成二维码
- POSIX 线程详解,第2部分
- Hibernate笔记
- css中的内容溢出
- 使用opengl实现一个简易的robot模拟
- jqGrid定制显示时间格式
- Ubuntu jdk环境变量
- 厌恶性盲区
- Android 3.0 访问WebService 出现 android.os.NetworkOnMainThreadException异常
- [转]Windows中PHP_PEAR_PHP_BIN is not set correctly的解决方法
- jsp 指令 标准标签库 动作 的使用
- opencv实现图像邻域均值滤波、中值滤波、高斯滤波