DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS網頁制作教程:網頁內容換行控制
CSS網頁制作教程:網頁內容換行控制
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:在進行DivCSS布局時,需要對文本進行控制,我們在poluoluo.com以前的文章中,也講過這方面的知識,今天系統的向大家介紹一下。CSS中控制換行的四種屬性。

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

一、white-space

  可以實現HTML中PRE標簽的效果,以及單元格的noWrap效果,點此查看示例。

語法:
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結合使用就不用再寫程序來判斷字符串長度了,點此查看示例。

語法:
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 對象。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved