DivCSS布局基礎 CSS中控制換行的四種屬性

2022-04-23 16:56:05 字數 2565 閱讀 6896

在進行divcss布局時,需要對文字進行控制,我們在52css.com以前的文章中,也講過這方面的知識,今天系統的向大家介紹一下。css中控制換行的四種屬性。

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

example source code [www.52css.com]

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

取值:normal: 預設值。預設處理方式。文字自動處理換行。假如抵達容器邊界內容會轉到下一行

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結合使用就不用再寫程式來判斷字串長度了,點此檢視示例。

example source code [www.52css.com]

語法:text-overflow : clip | ellipsis

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

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

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

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

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

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

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

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

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

二、word-break

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

example source code [www.52css.com]

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

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

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

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

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

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

三、word-wrap

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

example source code [www.52css.com]

語法: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可以達到更好的效果,點此檢視示例。

example source code [www.52css.com]

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

css學習 div css布局

1 布局 盒子布局 盒子模型 標準流 脫離文件流 標準文件流 塊級獨佔一行 行內塊和行內元素都是和其他共佔一行,在盒子中的元素遵循標準流從左到右從上到下排列,超過父元素時會溢位。一行行看 浮動 標準流配合使用 版心 width margin 0 auto ul li 標題 段落 a img dl d...

div css 網頁布局基礎

a link a hover a visited 偽類 css中很有用的知識點 p.cls1 p.cls2 萬用字元選擇器 四種選擇器優先順序 id選擇器 class html 萬用字元選擇器 父子選擇器 id1 span 1父子選擇器可以運用到任何選擇器中結合使用2不好超過三層,3有嚴格的層級關係...

css盒子模型,div css布局

css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...