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

屬性名稱

text-overflow(溢出處理)、word-break(斷行點)、word-wrap(單字換行)、text-justify(左右對齊方式)

text-outline(本文大綱)、text-emphasis(重點標記)、text-wrap(換行條件)、text-align-last(尾行設定)、hanging-punctuation(標點溢出)、punctuation-trim(標點剪裁)

text-justify

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

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

text-overflow

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

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

【範例】

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

【結果】

當文字超出方塊範圍時,剪裁或加入省略號。

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.

word-wrap

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

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

【範例】

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

【結果】

abcdefghijklmnopqrstuvwxyz