文本有关的样式和jQuery求对象的高宽问题分别说明-Web前端之家

为 div 设置了宽度、高度,也设置了
overflow:hidden,可是内容超出后并没有隐藏起来,仍然显示出来了,在 Chrome
中也是这样,到底怎么回事?

WEB开发经常会用到有关文处理本有关的问题,这里结合使用情况总结一下,同时还有jQuery求对象的高度问题,分别说明如下:
一、CSS中有关文本的样式 1, word-break: normal | keep-all | break-all
设置或检索单词在容器边界处的处理方式,是否允许单词内换行; normal:
浏览器默认处理方式; keep-all:遇到容器边界处,单词内不换行;
break-all:遇到容器边界处,单词内可换行,即单词断开换行显示; 2,
word-wrap: normal | break-word
设置或检索当内容超过指定容器的边界时是否断行; normal:
当内容超出容器边界时,内容可以顶开或溢出容器的边界; break-word:
当内容超出容器边界时,内容将在容器边界处换行; 3,white-space: normal |
pre | nowrap | pre-wrap | pre-line 设置或检索对象内空格的处理方式;
normal: 浏览器默认的处理方式; pre:
不合并空白,内容多超出容器边界也不换行; nowrap:
强制一行内显示所有文本,合并多余的空白,直到文本结束或遇到br对象;
pre-wrap: 不合并文本间空白,内容多时在遇到边界处换行; pre-line:
不保留文本间的空白,内容多时遇到边界处换行; 4,text-transform: none |
capitalize | uppercase | lowercase | full-width
检索或设置对象中的文本的大小写; none: 保留原样,不转换; capitalize:
每个单词首字母转成大写; uppercase: 单词全转成大写; lowercase:
单词全转成小写; full-width:
所有文本转变成fullwidth形式,没有对应的fullwidth形式则保留原样。
5,text-overflow: clip | ellipsis 设置检索文本超出容器边界处的处理方式;
clip: 当内容超出边界时,超出部分被剪切; ellipsis:
当内容超出边界时,超出部分用省略号表示;
注意:该属性需要设置white-space=nowrap,
overflow=hidden才起作用,且这两个属性放在text-overflow之前;
6,text-indent: | [ hanging || each-line ]
检索或设置对象中的文本的缩进; length: 文本缩进指定长度值,可以为负值。
percentage:文本缩进指定百分比值,可以为负值。 hanging:
定义缩进作用在块容器的第一行或者内部的每个强制换行的首行,软换行不受影响;
each-line: 反向所有被缩进作用的行; 如: p{text-indent:2em each-line}
7,line-height: normal | | | number
检索或设置对象的行高,即文本字符的最低到最顶之间的距离; normal:
默认允许内容顶开或一出指定的容器; length:
用指定数值指定行高,可为负数; percentage:
用指定百分比指定行高,可为负数; number: 用乘积因子指定行高,可为负数;
举例: 复制代码 代码如下:

原来呀,这个 div 设置了 padding,内容超出宽度、高度,它还显示在 padding
区域上方得,只有超出 padding 以外,才不会显示。

这里文本超出容器时将用显示省略号显示, text… text…
abc66666666666666666666666

二、jQuery获取DOM对象的高宽问题 高度有关的方法有: height,
outerHeight, 宽度有关的方法有:width, outerWidth
假如有id=div_id的div对象,那求出各种宽高如下: 复制代码 代码如下: $ / $; //
获得的是该div本身的高 / 宽度, (不包含padding,margin,border)
$.outerHeight.outerWidth(); // 包含该div本身的高 / 宽度, padding上下的高
/ 宽度, 以及border上下的高 / 宽度 $.outerHeight.outerWidth; //
包含该div本身的高 / 宽度, 以及padding,border,margin上下的总高 / 宽度
举例: 复制代码 代码如下:

div info: height : 30px, width : 500px, padding:10px 20px; margin:10px
5px,

发表评论

电子邮件地址不会被公开。 必填项已用*标注