- 摩刻部落 - https://www.moke.tw/wordpress -

CSS3與濾境(8)-文字排版

屬性名稱

text-overflow [1](溢出處理)、word-break [2](斷行點)、word-wrap [3](單字換行)、text-justify [4](左右對齊方式)
text-outline(本文大綱)、text-emphasis(重點標記)、text-wrap(換行條件)、text-align-last(尾行設定)、hanging-punctuation(標點溢出)、punctuation-trim(標點剪裁)

text-justify
說明:當段落為左右對齊(text-align:justify)時,指定對齊方式。限用IE瀏覽器。此語法不提供範例。(text-align請參考文字段落樣式 [5])

屬性值:auto(自動)、inter-word、inter-ideograph、inter-cluster、distribute、kashida、trim

回到【屬性名稱】 [6]

text-overflow
說明:當文字超出方塊範圍時,且overflow:hidden,則剪裁或加入省略號(...)。(overflow請參考圖層控制 [7]、white-space請參考文字段落樣式 [5])

屬性值:clip(剪裁)、ellipsis(省略號)、(文字)

【範例】

.box {
	width:100px;
	white-space:nowrap;
	overflow:hidden;
	border:1px solid #000000;
	text-overflow:ellipsis;		/* 不支援 Firefox */
}

【結果】

當文字超出方塊範圍時,剪裁或加入省略號。
回到【屬性名稱】 [6]

word-break
說明:決定文字內容的斷行點,中日韓文除外。

屬性值:normal(正常,單字斷行)、break-all(斷在任一字母)、hyphenate(斷在單字或-號)

【範例】

.p1 {
	width:175px;
	border:1px solid #000000;
	word-break:hyphenate;		/* 不支援 Firefox、Opera */
}
.p2 {
	width:175px;
	border:1px solid #000000;
	word-break:break-all;		/* 不支援 Firefox、Opera */
}

【結果】

This paragraph contains some text. This line will-break-at-hyphenates.

This paragraph contains some text. This line will-break-at-any-character.

回到【屬性名稱】 [6]

word-wrap
說明:是否對過長的單字進行斷行。當方塊內有一個單字長度超過方塊寬度時,是否允許斷行,或溢出。

屬性值:normal(正常,溢出)、break-word(直接斷行)

【範例】

.box {
	width:100px;
	overflow:hidden;
	word-wrap:break-word;
}

【結果】

abcdefghijklmnopqrstuvwxyz
回到【屬性名稱】 [6]