文字有關的樣式和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: | [ hanging || each-line ]

檢索或設定物件中的文字的縮排;

length: 文字縮排指定長度值，可以為負值。

percentage:文字縮排指定百分比值，可以為負值。

hanging: 定義縮排作用在塊容器的第一行或者內部的每個強制換行的首行，軟換行不受影響;

each-line: 反向所有被縮排作用的行;

如: p

7,line-height: normal | | | number

檢索或設定物件的行高,即文字字元的最低到最頂之間的距離；

normal: 預設允許內容頂開或一出指定的容器；

length: 用指定數值指定行高，可為負數；

percentage: 用指定百分比指定行高，可為負數；

number: 用乘積因子指定行高，可為負數；

舉例：

這裡文字超出容器時將用顯示省略號顯示， text... text... abc66666666666666666666666

在ipad上用css控制顯示 x 行，多出時顯示省略號，關鍵的css如下：

display:-webkit-box;
-webkit-line-clamp:2; /* 最多顯示2行 */
-webkit-box-orient:vertical;
overflow:hidden;

二，jquery獲取dom物件的高寬問題

高度有關的方法有：height(),outerheight(),outerheight(true), 寬度有關的方法有：width(),outerwidth(),outerwidth(true)

假如有id=div_id的div物件，那求出各種寬高如下：

1. $("#div_id").height() / $("#div_id").width(); // 獲得的是該div本身的高 / 寬度, (不包含padding,margin,border)

2. $("#div_id").outerheight() / $("#div_id").outerwidth(); // 包含該div本身的高 / 寬度, padding上下的高 / 寬度, 以及border上下的高 / 寬度(不包含margin的高 / 寬度)

3. $("#div_id").outerheight(true) / $("#div_id").outerwidth(true); // 包含該div本身的高 / 寬度, 以及padding,border,margin上下的總高 / 寬度

舉例：

div info: height : 30px, width : 500px, padding:10px 20px; margin:10px 5px,

文字有關的樣式和jQuery求物件的高寬問題

jquery的屬性和樣式

jQuery的屬性和樣式

文字標籤和樣式

文字有關的樣式和jQuery求物件的高寬問題

jquery的屬性和樣式

jQuery的屬性和樣式

文字標籤和樣式

相關推薦