首頁 > web前端 > js教程 > 文字有關的樣式和jQuery求物件的高寬問題分別說明_jquery

文字有關的樣式和jQuery求物件的高寬問題分別說明_jquery

WBOY
發布: 2016-05-16 17:23:53
原創
1018 人瀏覽過

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{text-indent:2em each-line}

7,line-height: normal | | | number
擷取或設定物件的行高,即文字字元的最低到最頂之間的距離;
normal: 預設允許內容頂開或一出指定的容器;
length: 用指定數值指定行高,可為負數;
percentage: 用指定百分比指定行高,可為負數;
number: 用乘積因子指定行高,可為負數;

舉例:

複製程式碼 程式碼如下:


這裡文字超出容器時將以顯示省略號顯示, text... text... abc6666666666666666666666








$("#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 情報: 高さ: 30px、幅: 500px、パディング:10px 20px; margin:10px 5px、



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板