文本有关的样式和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 相关文章推荐
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php实现word转html的方法
2016/01/22 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
轮播图组件js代码
2016/08/08 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Python random模块的使用示例
2020/10/10 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
extern是什么意思
2016/03/10 面试题
GWT都有什么特性
2016/12/02 面试题
简历中自我评价分享
2013/10/09 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Pandas自定义选项option设置
2021/07/25 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python