文本有关的样式和jQuery求对象的高宽问题分别说明 |
|
本文标签：文本样式,jQuery求高宽 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: <length> | <percentage> [ hanging || each-line ] 检索或设置对象中的文本的缩进; length: 文本缩进指定长度值，可以为负值 。 percentage:文本缩进指定百分比值，可以为负值 。 hanging: 定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响; each-line: 反向所有被缩进作用的行; 如: p{text-indent:2em each-line} 7,line-height: normal | <length> | <percentage> | number 检索或设置对象的行高,即文本字符的最低到最顶之间的距离； normal: 默认允许内容顶开或一出指定的容器； length: 用指定数值指定行高，可为负数； percentage: 用指定百分比指定行高，可为负数； number: 用乘积因子指定行高，可为负数； 举例： 复制代码 代码如下: <div style="border:1px solid red; width:500px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"> 这里文本超出容器时将用显示省略号显示， text... text... abc66666666666666666666666 </div> 二、jQuery获取DOM对象的高宽问题 高度有关的方法有： height(), outerHeight(), outerHeight(true), 宽度有关的方法有：width(), outerWidth(), outerWidth(true) 假如有id=div_id的div对象，那求出各种宽高如下： 复制代码 代码如下: $("#div_id").height() / $("#div_id").width(); // 获得的是该div本身的高 / 宽度, (不包含padding,margin,border) $("#div_id").outerHeight() / $("#div_id").outerWidth(); // 包含该div本身的高 / 宽度, padding上下的高 / 宽度, 以及border上下的高 / 宽度(不包含margin的高 / 宽度) $("#div_id").outerHeight(true) / $("#div_id").outerWidth(true); // 包含该div本身的高 / 宽度, 以及padding,border,margin上下的总高 / 宽度 举例： 复制代码 代码如下: <div id="testDiv" style="margin:10px 5px; width:600px; padding:10px 20px; height:60px; border:2px solid red; font-family:arial,verdana;"> div info: height : 30px, width : 500px, padding:10px 20px; margin:10px 5px, </div> <input type="button" value="TEST" id="btnTest" onclick="testHeight();"/> <script type="text/javascript"> function testHeight(){ var obj = $(#testDiv); alert(obj height = + obj.height() + \nobj outerHeight = + obj.outerHeight() + \nobj outerHeight(true) = + obj.outerHeight(true)); alert(obj width = + obj.width() + \nobj outerWidth = + obj.outerWidth() + \nobj outerWidth(true) = + obj.outerWidth(true)); } </script> |
