文本有关的样式和jQuery求对象的高宽问题分别说明

 更新时间:2013年08月30日 17:07:16   作者:  
有关文处理本有关的问题WEB开发经常会用到,这里结合使用情况总结一下,同时还有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>

相关文章

  • 基于jQuery实现点击弹出层实例代码

    基于jQuery实现点击弹出层实例代码

    基于jquery实现点击链接弹出层效果,其基本实现原理是这样的:jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏;对jq点击弹出层相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • JQuery判断checkbox是否选中及其它复选框操作方法合集

    JQuery判断checkbox是否选中及其它复选框操作方法合集

    这篇文章主要介绍了JQuery判断checkbox是否选中及其它复选框操作方法合集,本文汇总了网上解决这个问题比较好的几篇文章,需要的朋友可以参考下
    2015-06-06
  • 原生和jQuery的ajax用法详解

    原生和jQuery的ajax用法详解

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写)。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。这篇文章主要介绍了原生和jQuery的ajax用法,需要的朋友参考下吧
    2017-01-01
  • 详解jQuery设置内容和属性

    详解jQuery设置内容和属性

    这篇文章主要介绍了jQuery设置内容和属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一个可绑定数据源的jQuery数据表格插件

    一个可绑定数据源的jQuery数据表格插件

    此文将实现一个的jQuery表格插件jQuery.DataGrid。需要的朋友可以参考下。
    2010-07-07
  • JQuery 构建客户/服务分离的链接模型中Table中的排序分析

    JQuery 构建客户/服务分离的链接模型中Table中的排序分析

    从上篇文章,我们实现了Table分页代码的高效性,咱们继续沿着这个思路,探讨Table表格数据中另外一个很常见的排序问题。说到排序,我记得在asp.net中 GridView中提供了这样的方便,只需在展示字段上加上 Sorting 这样的属性,基本就完成了,剩下就是服务端cs代码的写法了。
    2010-01-01
  • jQuery3.0中的buildFragment私有函数详解

    jQuery3.0中的buildFragment私有函数详解

    在 jQuery3.0中,buildFragment 是一个私有函数,用来构建一个包含子节点 fragment 对象。下文给大家介绍jQuery3.0中的buildFragment私有函数详解,对jquery3.0 buildfragment相关知识感兴趣的朋友一起学习吧
    2016-08-08
  • jQuery实现高亮显示网页关键词的方法

    jQuery实现高亮显示网页关键词的方法

    这篇文章主要介绍了jQuery实现高亮显示网页关键词的方法,涉及jquery针对页面字符串的遍历与正则替换的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jQuery EasyUI API 中文文档 - PropertyGrid属性表格

    jQuery EasyUI API 中文文档 - PropertyGrid属性表格

    jQuery EasyUI API 中文文档 - PropertyGrid属性表格使用介绍,需要的朋友可以参考下。
    2011-11-11
  • jQuery表单校验插件validator使用方法详解

    jQuery表单校验插件validator使用方法详解

    这篇文章主要为大家详细介绍了jQuery表单校验插件validator的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论