word-break:break-all;只對英文起作用,以字母作為換行依據
word-wrap:break-word; 只對英文起作用,以單詞作為換行依據
white-space:pre-wrap; 只對中文起作用,強制換行
white-space:nowrap; 強制不換行,都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行,超出部分隱藏且以省略號形式出現
white-space值描述
normal
預設。空白會被瀏覽器忽略。
pre空白會被瀏覽器保留。其行為方式類似 html 中的
標籤。值nowrap
文字不會換行,文字會在在同一行上繼續,直到遇到
標籤為止。
pre-wrap
保留空白符序列,但是正常地進行換行。
pre-line
合併空白符序列,但是保留換行符。
inherit
規定應該從父元素繼承 white-space 屬性的值。
text-overflow
語法:
text-overflow : clip | ellipsis
引數:
clip : 不顯示省略標記(...),而是簡單的裁切
(clip這個引數是不常用的!)
ellipsis : 當物件內文字溢位時顯示省略標記(...)
word-break
描述normal
使用瀏覽器預設的換行規則。
break-all
允許在單詞內換行。
keep-all
只能在半形空格或連字元處換行。
overflow值描述
visible
預設值。內容不會被修剪,會呈現在元素框之外。
hidden
內容會被修剪,並且其餘內容是不可見的。
scroll
內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit
規定應該從父元素繼承 overflow 屬性的值。
CSS強制中英文換行與不換行 強制英文換行示例
1.word break break all 只對英文起作用,以字母作為換行依據 2.word wrap break word 只對英文起作用,以單詞作為換行依據 3.white space puolwure wrap 只對中文起作用,強制換行 4.white space nowrap 強制不換行程...
CSS中英文換行問題
1.word break break all 只對英文起作用,以字母作為換行依據 2.word wrap break word 只對英文起作用,以單詞作為換行依據 3.white space pre wrap 只對中文起作用,強制換行 4.white space nowrap 強制不換行,都起作用 ...
CSS中英文換行問題
word break break all 只對英文起作用,以字母作為換行依據 word wrap break word 只對英文起作用,以單詞作為換行依據 white space pre wrap 只對中文起作用,強制換行 white space nowrap 強制不換行,都起作用 white sp...