js实例教程-文本有关的样式和jQuery求对象的高宽问题分别说明

发布时间:2018-12-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-文本有关的样式和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: 用乘积因子指定行高,可为负数;

举例:

.@H_406_61@ 代码如下:


<p style="border:1px solid red; width:500px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
这里文本超出容器时将用显示省略号显示, text... text... abc66666666666666666666666
</p>


二、jquery获取DOM对象的高问题

高度有关的方法有: height(), outerHeight(), outerHeight(true), 宽度有关的方法有:width(), outerWidth(), outerWidth(true)

假如有id=p_id的p对象,那求出各种宽高如下:

. 代码如下:


$("#p_id").height() / $("#p_id").width(); // 获得的是该p本身的高 / 宽度, (不包含padding,margin,border)
$("#p_id").outerHeight() / $("#p_id").outerWidth(); // 包含该p本身的高 / 宽度, padding上下的高 / 宽度, 以及border上下的高 / 宽度(不包含margin的高 / 宽度)
$("#p_id").outerHeight(true) / $("#p_id").outerWidth(true); // 包含该p本身的高 / 宽度, 以及padding,border,margin上下的总高 / 宽度


举例:

. 代码如下:


<p id="testDiv" style=";margin:10px 5px; width:600px; padding:10px 20px; height:60px; border:2px solid red; font-family:arial,verdana;">
p info: height : 30px, width : 500px, padding:10px 20px; margin:10px 5px,
</p>
<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>

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: 用乘积因子指定行高,可为负数;

举例:

. 代码如下:


<p style="border:1px solid red; width:500px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
这里文本超出容器时将用显示省略号显示, text... text... abc66666666666666666666666
</p>


二、jQuery获取DOM对象的高宽问题

高度有关的方法有: height(), outerHeight(), outerHeight(true), 宽度有关的方法有:width(), outerWidth(), outerWidth(true)

假如有id=p_id的p对象,那求出各种宽高如下:

. 代码如下:


$("#p_id").height() / $("#p_id").width(); // 获得的是该p本身的高 / 宽度, (不包含padding,margin,border)
$("#p_id").outerHeight() / $("#p_id").outerWidth(); // 包含该p本身的高 / 宽度, padding上下的高 / 宽度, 以及border上下的高 / 宽度(不包含margin的高 / 宽度)
$("#p_id").outerHeight(true) / $("#p_id").outerWidth(true); // 包含该p本身的高 / 宽度, 以及padding,border,margin上下的总高 / 宽度


举例:

. 代码如下:


<p id="testDiv" style="margin:10px 5px; width:600px; padding:10px 20px; height:60px; border:2px solid red; font-family:arial,verdana;">
p info: height : 30px, width : 500px, padding:10px 20px; margin:10px 5px,
</p>
<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>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-文本有关的样式和jQuery求对象的高宽问题分别说明全部内容,希望文章能够帮你解决js实例教程-文本有关的样式和jQuery求对象的高宽问题分别说明所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。