DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 文本有關的樣式和jQuery求對象的高寬問題分別說明
文本有關的樣式和jQuery求對象的高寬問題分別說明
編輯: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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved