CSS中幾種控制換行的方式

2021-06-16 00:31:00 字數 2766 閱讀 1529

一、white-space

可以實現html中pre標籤的效果,以及單元格的nowrap效果,點此檢視示例。

語法:white-space : normal | pre | nowrap

取值:pre:換行和其他空白字元都將受到保護。這個值需要ie6+或者 !doctype 宣告為 standards-compliant mode 支援。如果 !doctype 宣告沒有指定為 standards-compliant mode ,此屬性可以使用,但是不會發生作用。結果等同於 normal 。參閱 pre 物件 

nowrap: 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件。參閱 nowrap 屬性

說明:設定或檢索物件內空格字元的處理方式。

空格字元,像換行,空格,tab,在html文件中預設的是被忽略的。當此屬性設定為 normal 或者 nowrap 時,你可以使用不換行空格的命名實體   來新增空格,用 br 元素來新增換行。此屬性對你使用文件物件模型(dom)操作的內容的影響與其對ie顯示內容的影響一樣。

此屬性作用於塊物件。 

text-overflow

將它與white-space結合使用就不用再寫程式來判斷字串長度了,點此檢視示例。

語法:text-overflow : clip | ellipsis 

取值:clip:預設值。不顯示省略標記(...),而是簡單的裁切 

ellipsis:當物件內文字溢位時顯示省略標記(...) 

說明:設定或檢索是否使用乙個省略標記(...)標示物件內文字的溢位。

這個屬性僅僅作用於水平內聯方向的,普通的西方文字的溢位。內聯溢位發生在行內的文字超出可用寬度卻沒有換行機會的時候。

要強制溢位發生並且應用 ellipsis 值,作者必須設定物件的 white-space 屬性值為 nowrap 。

假如沒有換行機會(例如,物件容器的寬度是狹窄的,而內有很長的沒有合理斷行的文字),沒有應用 nowrap 也有可能溢位。

為了使 ellipsis 值被應用,此屬性必須被設定到具有不可視區域的物件。最好的選擇是設定 overflow 屬性為 hidden 。設定 overflow 屬性為 scroll 或者 auto 時,此屬性也會應用。但是會有滾動條出現。

通過選擇省略標記,隱藏的文字可以被選擇。當選擇發生時,省略標記會隱藏而被文字替換。

此屬性為在dhtml中製作省略標記提供了高效的方法。

二、word-break

最常用的控制換行屬性,常與下面的word-wrap結合使用,點此檢視示例。

語法:word-break : normal | break-all | keep-all 

取值:normal: 預設值。允許在詞間換行 

break-all:該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字 

keep-all:與所有非亞洲語言的 normal 相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文字的非亞洲文字 

說明:設定或檢索物件內文字的字內換行行為。尤其在出現多種語言時。

對於中文,應該使用 break-all 。

三、word-wrap

如果你設計的網頁不是自適應寬度的話,需要將它設定為break-word,否則可能出現版快錯開的情況,點此檢視示例。

語法:word-wrap : normal | break-word 

取值:normal:預設值。允許內容頂開指定的容器邊界 

break-word:內容將在邊界內換行。如果需要,詞內換行( word-break )也將發生 

說明:設定或檢索當當前行超過指定容器的邊界時是否斷開轉行。

此屬性僅作用於有布局的物件,如塊物件。內聯要素要使用該屬性,必須先設定物件的 height 或 width 屬性,或者設定 position 屬性為 absolute ,或者設定 display 屬性為 block 。

四、overflow,overflow-x,overflow-y

這個不是嚴格意思上的控制換行樣式,但在某些時候將它設定為hidden可以補充word-wrap的不足,比方你想在限制寬度裡僅顯示一行文字,而這行文字的長度卻超過這個寬度,結合white-space+text-overflow可以達到更好的效果,點此檢視示例。

語法:overflow : visible | auto | hidden | scroll 

取值:visible: 預設值。不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將以包含物件的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效 

auto:在必需時物件內容才會被裁切或顯示滾動條 

hidden:不顯示超過物件尺寸的內容 

scroll:總是顯示滾動條 

說明:檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

所有物件的預設值是 visible ,除了 textarea 物件和 body 物件的預設值是 auto 。設定 textarea 物件此屬性值為 hidden 將隱藏其滾動條。

對於 table 來說,假如 table-layout 屬性設定為 fixed ,則 td 物件支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ,那麼超出 td 尺寸的內容將被剪下。如果設為 visible ,將導致額外的文字溢位到右邊或左邊(視 direction 屬性設定而定)的單元格。

自ie5開始,此屬性在mac平台上可用。

自ie6開始,當你使用 !doctype 宣告指定了 standards-compliant 模式,此屬性可以應用於 html 物件。

**【

css控制強制換行

一 發現問題 一般情況下,元素擁有預設的white space normal 自動換行,不換行是white space nowrap 當錄入的文字超過定義的寬度後會自動換行,但當錄入的資料是一堆沒有空格的字元或字母或數字 常規資料應該不會有吧,但有些測試人員是會這樣子做的 超過容器寬度時就會把容器撐...

css控制強制換行

一 發現問題 一般情況下,元素擁有預設的white space normal 自動換行,不換行是white space nowrap 當錄入的文字超過定義的寬度後會自動換行,但當錄入的資料是一堆沒有空格的字元或字母或數字 常規資料應該不會有吧,但有些測試人員是會這樣子做的 超過容器寬度時就會把容器撐...

css控制文字換行

設定為break word時,文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap,遇到長單詞時內容溢位,效果如圖所示 設定為break all時,文字遇到長單詞,會選擇在合適的位置截斷進行換行 換行換行...