CSS中的空白屬性用於控製文本換行和white-spacing。此屬性中有多種類型的值可以使用。
用法:
white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
屬性值:
- normal:這是此屬性的默認值。當CSS的空白屬性設置為normal時,兩個或多個white-spaces的每個序列都將顯示為單個空白。元素中的內容將在需要時進行包裝。
用法:white-space:normal;
例:
<!DOCTYPE html> <html> <head> <title> CSS | white-space Property </tile> <style> div { width:500px; height:500px; white-space:normal; background-color:limegreen; color:white; font-size:80px; } </style> </head> <body> <center> <div> Geeks For Geeks: <br> A Computer Science Portal For Geeks. </div> </center> </body> </html>
輸出:
具有正常值的空白屬性CSS
- nowrap:當CSS的空白屬性設置為nowrap時,兩個或多個white-spaces的每個序列將顯示為單個空白。除非明確指定,否則元素中的內容不會換行。
用法:white-space:nowrap;
例:
<!DOCTYPE html> <html> <head> <title> CSS | white-space Property </tile> <style> div { width:300px; height:300px; white-space:nowrap; background-color:lightgreen; color:black; font-size:25px; } </style> </head> <body> <center> <div> Geeks For Geeks: A Computer Science Portal For Geeks. </div> </center> </body> </html>
輸出:
具有nowrap值的空白屬性
- pre:此值使空格與HTML中的<pre>標簽具有相同的效果。僅當使用換行符指定時,元素中的內容才會換行。句法:
white-space:pre;
例:
<!DOCTYPE html> <html> <head> <title> CSS | white-space Property </tile> <style> div { width:300px; height:300px; white-space:pre; background-color:lightgreen; color:black; font-size:25px; } </style> </head> <body> <center> <div> Geeks For Geeks: A Computer science portal for geeks. </div> </center> </body> </html>
輸出:
具有預值的空白屬性
- 前行:當CSS的空白屬性設置為行前值時,兩個或多個white-spaces的每個序列將顯示為單個空白。元素中的內容將在需要時以及在明確指定時進行包裝。
用法:white-space:pre-line;
例:
<!DOCTYPE html> <html> <head> <title> CSS | white-space Property </tile> <style> div { width:300px; height:300px; white-space:pre-line; background-color:lightgreen; color:black; font-size:25px; } </style> </head> <body> <center> <div> Geeks For Geeks: A science portal for geeks. </div> </center> </body> </html>
輸出:
空格屬性的行前值
- 預包裝:當CSS的空白屬性設置為前行值時,white-spaces的每個序列都將按原樣顯示。元素中的內容將在需要時以及在明確指定時進行包裝。
用法:white-space:pre-wrap;
例:
<!DOCTYPE html> <html> <head> <title> CSS | white-space Property </tile> <style> div { width:300px; height:300px; white-space:pre-wrap; background-color:lightgreen; color:black; font-size:25px; } </style> </head> <body> <center> <div> Geeks For Geeks: A science portal for geeks. </div> </center> </body> </html>
輸出:
空格預包裝值
- initial:此值將空白屬性設置為默認值。
用法:white-space:initial;
- inherit:此值將空白屬性設置為父元素的值。
用法:white-space:inherit;
支持的瀏覽器:下麵列出了空白屬性支持的瀏覽器:
- chrome :1.0
- 邊:8.0
- 的Firefox:3.5
- Opera :9.5
- Safari:3.0
相關用法
- HTML Style whiteSpace用法及代碼示例
- CSS transition-property用法及代碼示例
- CSS all屬性用法及代碼示例
- CSS nav-right用法及代碼示例
- CSS right屬性用法及代碼示例
- CSS nav-down用法及代碼示例
- CSS nav-up用法及代碼示例
- CSS top屬性用法及代碼示例
- CSS max-width用法及代碼示例
- CSS height屬性用法及代碼示例
- CSS resize屬性用法及代碼示例
- CSS align-self用法及代碼示例
- CSS margin-right用法及代碼示例
- CSS order屬性用法及代碼示例
- CSS box-sizing用法及代碼示例
注:本文由純淨天空篩選整理自roshalmoraes大神的英文原創作品 CSS | white-space Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。