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


Posted in Javascript onAugust 30, 2013

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>
Javascript 相关文章推荐
javascript中字符串拼接详解
Sep 26 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
JS下拉缓冲菜单示例代码
Aug 30 #Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 #Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 #Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 #Javascript
图片Slider 带左右按钮的js示例
Aug 30 #Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 #Javascript
Jquery读取URL参数小例子
Aug 30 #Javascript
You might like
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
高一地理教学反思
2014/01/18 职场文书
保密工作实施方案
2014/02/24 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
干部作风建设心得体会
2014/10/22 职场文书
听证通知书
2015/04/24 职场文书
入党培养人考察意见
2015/06/08 职场文书
员工离职证明范本
2015/06/12 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers