CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

  平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。

  这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。

  特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法。

  总之要想让内容不超出对象设置宽度高度限定,那就使用overflow:hidden隐藏超出多余部分即可

一、 我们可以使用CSS overflow样式解决

  对应样式overflow:hidden

  Div{overflow:hidden}

这样设置后,假如DIV对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

二、超出部分用省略号显示

  1、对象设置text-overflow:ellipsis;省略号样式

  2、使用nobr标签,强制让内容不换行(css换行、css不换行)。

  div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;   }

NOte:

  text-overflow语法:
  text-overflow : clip | ellipsis

  text-overflow参数值和解释:
  clip :  不显示省略标记(...),而是简单的裁切
  ellipsis :  当对象内文本溢出时显示省略标记(...)

  text-overflow应用说明:
    
CSS text-overflow设置或检索是否使用一个省略号标记(...)标示对象内文本文字的溢出。

  要想实现显示不完内容将显示省略号代替,还需要html nobr标签完成(nobr禁止换行标签)

  white-space

    属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的
默认值: normal
继承性: yes
版本: CSS1 JavaScript 语法: object.style.whiteSpace="pre"
实例
规定段落中的文本不进行换行:
p{
white-space: nowrap
} 浏览器支持
  所有浏览器都支持 white-space 属性。
注:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法的更多相关文章

  1. 用css样式,为表格加入边框

    Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...

  2. css为超过一定宽度的文本内容自动加上省略号

    当在html中某个地方添加文本内容的时候如果内容过长我们会希望他超过一定宽度之后,其余的可以被截断,后面补充为省略号: 实现方式: 1.设置css样式为文本不换行: 2.位包裹文本的标签指定宽度: 3 ...

  3. div高度根据内容自动增大

    1.很多时候我们希望容器高度能够自适应内部元素的变化,需要用到min-height属性. 2.有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元 ...

  4. 学习笔记之CSS样式(选择器背景字体边框绝/相对、固定位置and分层流等)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. css 样式文字溢出显示省略号

    在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;"> ...

  6. 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题

    /*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...

  7. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  8. DIV未知宽度高度垂直水平居中

    使用过一种算是相对来说比较好理解一些的吧算是,代码如下: <style> width:800px; height:400px; margin:0 auto; position:absolu ...

  9. div box container随主体内容自动扩展适应的实现

    /**顶部部分*/ .con-tl{ background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0); padding-left: ...

随机推荐

  1. Linux中的目录功能(Red Hat 7)

    目录的基本功能: /bin:存放普通用户使用的命令 /sbin:存放管理员可以执行的命令 /home:存放普通的家目录 如张三家目录为/home/zhangsan /root:管理员的家目录 /etc ...

  2. 标记编码报错ValueError: bad input shape ()

    <Python机器学习经典实例>2.9小节中,想自己动手实践汽车特征评估质量,所以需要对数据进行预处理,其中代码有把字符串标记编码为对应的数字,如下代码 input_data = ['vh ...

  3. VS2017发布微服务到docker

    1.本文档以eShopOnContainers.sevices.identity为描述对象,并包含docker for windows的部分配置流程. 2.前置环境:win10操作系统.安装VS201 ...

  4. 类 java.util.Collections 提供了对Set、List、Map进行排序、填充、查找元素的辅助方法。

      类 java.util.Collections 提供了对Set.List.Map进行排序.填充.查找元素的辅助方法. 1. void sort(List) //对List容器内的元素排序,排序的规 ...

  5. centos linux 因别名问题引起的麻烦及解决技巧

    老男孩儿-19期 L005-13节中分享.自己整理后发到自己微博中留档. 原文:http://oldboy.blog.51cto.com/2561410/699046 实例:老男孩linux实战培训第 ...

  6. ionic 入口禁止加载其他页面

    .state('memberOrders', { prefetchTemplate: false, url: '/memberOrders', templateUrl: '/MemberOrders' ...

  7. 谷歌js编码规范解析

    http://alloyteam.github.io/JX/doc/specification/google-javascript.xm 阅读了谷歌js编码规范,我发现了很多,js的里面很多要注意的问 ...

  8. wirehshark解密IPSEC流量

    wireshark解密IPSEC加密过的流量 题目是安恒二月月赛题目:简单的流量分析 1.首先会发现很多esp类型的流量 我们不知道密钥就没有办法解密,猜测密钥肯定是在流量包里面的. 加密流量在786 ...

  9. Oracle to MySQL Goldengate实现增量迁移

    第一部分:安装和基本配置 一.环境 两台rhel 6.4虚拟机,分别异构oracle到mysql数据库同步测试Ip:192.168.0.23 部署oracle 11.2.0.4,goldgate 12 ...

  10. 问题 A: 完数

    问题 A: 完数 时间限制: 1 Sec  内存限制: 32 MB提交: 252  解决: 178[提交][状态][讨论版][命题人:外部导入] 题目描述 求1-n内的完数,所谓的完数是这样的数,它的 ...