文本有关的样式和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>

(0)

相关推荐

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

    WEB开发经常会用到有关文处理本有关的问题,这里结合使用情况总结一下,同时还有jQuery求对象的高度问题,分别说明如下: 一.CSS中有关文本的样式 1, word-break: normal | keep-all | break-all 设置或检索单词在容器边界处的处理方式,是否允许单词内换行: normal: 浏览器默认处理方式: keep-all:遇到容器边界处,单词内不换行: break-all:遇到容器边界处,单词内可换行,即单词断开换行显示: 2, word-wrap: norma

  • vue通过v-html指令渲染的富文本无法修改样式的解决方案

    1.问题描述 在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式. 代码如下,div.article-context里面的图片修改成自适应,但是没有任何效果. <div class="article-context" v-html="post.content"></div> <style scoped> .article-context img { width: auto; height: auto;

  • jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标

  • jQuery实现对象转为url参数的方法

    本文实例讲述了jQuery实现对象转为url参数的方法.分享给大家供大家参考,具体如下: ajax 方式对象参数 复制代码 代码如下: var conditions = {status:0,title:'',specialId:'',creatorId:'',authorId:'',startViewCount:0,endViewCount:0,startFactTime:'',endFactTime:''}; jQuery 对象转为url参数 //导出全部查询结果 function expor

  • 浅谈jQuery异步对象(XMLHttpRequest)

    我们先来看看异步对象五部曲 这是post请求的. 复制代码 代码如下: //1.00创建异步对象             var xhr = new XMLHttpRequest();             //2.0             xhr.open("post", url,params, true);             //3.0将参数使用Formdata属性传递             xhr.setRequestHeader("Content-Type

  • jquery判断对象是否为空并遍历对象的简单实例

    javascript : if(document.getElementById("target_obj_id")){ } else { } jquery: 因为 $("#target_obj_id") 不管对象是否存在都会返回 object ,所以以上方法不行 1. var target_obj = jQuery('#target_obj_id'); if (target_obj.length > 0) { //如果大于0 标识 id 为target_obj_

  • jQuery判断对象是否存在的方法

    本文实例讲述了jQuery判断对象是否存在的方法.分享给大家供大家参考.具体如下: 一.传统Javascript的写法 obj = document.getElementById("someID"); if (obj){ obj.innerText("hi"); } 在jQuery中,var obj = $("#id")无论id这个控件是否存在,都是返回object,这样可就无法使用if(obj)来判断这个控件是否存在了   二.jQuery判断

  • jquery 事件对象属性小结

    使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

  • jQuery遍历对象、数组、集合实例

    1.jquery 遍历对象 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML>   <HEAD>    <TITLE> New Document </TITLE>    <script language="javascript" type="text/javascript"

  • javascript异步处理与Jquery deferred对象用法总结

    本文实例讲述了javascript异步处理与Jquery deferred对象用法.分享给大家供大家参考,具体如下: 这是项目组老大整理的一些关于jquery 异步处理请求,以及使用 jquery deferred 对象的一些常见方法.虽然是项目上总结出来的.但也比较通用,分享在这里. 所有的Ajax操作都采用异步处理. 采用Jquery的Deffered对象来处理异步调用. 因为是异步调用,所以$.Ajax函数的返回值不代表返回的结果,只是一个Deffered对象. Ajax调用完成后执行的逻

随机推荐