iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 14
1
Modern Web

鉄人28号FX系列 第 14

鉄人28号FX 鉄人14号「空白彈」white-space, word-break, overflow-wrap

★ 支線:地圖東南方林中村落 ↓↓↓

顯示道具屋位置圖

NPC [道具屋老闆]
我這邊有各種樣式的空白彈,
在必要時,可以任意移開擋在前面的所有文字。

或許混合使用,會有特殊奇效。
哈哈,要不要多買一點啊!!!
算你便宜些?


★★★ 關卡條件 ↓↓↓

不換行與斷行 (white-space, word-break, overflow-wrap)

white-space

屬性決定如何處理元素內的空白字元,同時還能控制是否自動換行。

  • normal
    連續的空白字元 (white-space) 會被合併 (collapse),換行字元 (\n) 被視為空白字元。並可隨著容器縮放自動換行。
  • nowrap
    normal 模式相同,相異地方在於,強制不換行。
  • pre
    連續的空白字元與換行字元都會被保留 (preserve),並強制不換行。功能與 HTML 中的 <pre> 元素相同。
  • pre-wrap
    所有文本格式皆會被保留 (例 連續空白字元、換行字元等),並可隨著容器縮放自動換行。
  • pre-line
    pre-wrap 模式相同,相異地方在於,連續的空白字元會被合併。
  • break-spaces
    pre-wrap 模式相同,卻有些許相異地方,尚未全面支援。[詳解更多]
New lines 換行字元 Spaces and tabs 空格和製表鍵 Text wrapping 自動換行 End-of-line spaces 行尾空格
normal × Collapse × Collapse ○ Wrap Remove
nowrap × Collapse × Collapse × No wrap Remove
pre ○ Preserve ○ Preserve × No wrap Preserve
pre-wrap ○ Preserve ○ Preserve ○ Wrap Hang
pre-line ○ Preserve × Collapse ○ Wrap Remove
break-spaces ○ Preserve ○ Preserve ○ Wrap Wrap

註:可參考 MDN white-space 實作範例,更了解其規則。


word-break

屬性對於 CJK (中文 / 日文 / 韓文) 文本與 non-CJK文本,多國語言混和使用時,如何控制其換行規則。

  • normal
    使用默認換行字元規則,允許 non-CJK 長單詞溢出。
  • break-all
    CJK 符合一般換行規則。而對於 non-CJK,只要超出容器邊界,都將被強制拆行。例 incomprehensibilityis 長短單詞,皆在字母之間任意換行。
  • keep-all
    CJK 文本如無任何換行符 (標點符號或空白字元等) 則強制不換行。non-CJK 文本表現同 normal 模式。

overflow-wrap(word-wrap)

屬性用於當一個長單詞 (incomprehensibility),在獨自佔滿整行且產生溢出行為時,瀏覽器是否允許自動換行。(盡可能地保持避頭尾與避免強制斷行)

  • normal
    只能在正常的空白字元處換行,否則允許長單詞溢出,顯示不換行。

  • break-word
    當一個長單詞在獨自佔滿整行且產生溢出行為時,允許自動換行。


NPC [道具屋老闆]
我沒說錯吧!!
各種情況下都能挑選到符合的。(
超得意樣 )

看你這麼有興趣,
我就再重點提示一下:

  • 以上三種屬性皆可透過 <br> 元素強制斷行,以及不換行空格 ' ' 修改文本內容。
  • word-break: break-word (屬性已棄用) 和 overflow-wrap: break-word (建議使用) 同等效用。
  • 如想讓文本長單詞自動換行,可採用 overflow-wrapword-breakhyphens [註1]。
  • 針對「網址字串」建議使用 overflow-wrap: break-word

[註1]:hyphens 屬性告知瀏覽器在換行時,如何透過連字符連接單詞,或讓瀏覽器可在適當的位置自動插入連字符。


。:.゚ヽ(*´∀`)ノ゚.:。
★ 觸發祕技:擠進推出避頭尾 (Kinsoku Method)

避頭尾是指在內文排版時,避免讓逗號、頓號、句號等表示語氣停頓的標點符號出現在行首,目的主要是為了讓讀者在換行接讀時的順暢性。現代文本常夾雜半形的英文或數字,再加上避頭尾的原則,行末難免會參差不齊。而為了左右齊行,只好把字距強制拉散或壓縮,導致於字距完全疏密不一。

而對於無避頭尾設定,是否還能保留閱讀順暢性呢? 就留待你來解讀。

Kinsoku Method

(註 圖片來源:台語漢字本聖經 局部文本 )

夕陽依舊那麼美麗~
啊明天還是好天氣。

終於踏上未知旅程。


[ 追加經驗值 ]
註:參考來源 thetype 擠進推出避頭尾
徹底搞懂 word-break、word-wrap、white-space
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人13号「縮進盾」text-indent
下一篇
鉄人28号FX 鉄人15号「間距蟻」letter-spacing, word-spacing, line-height
系列文
鉄人28号FX30
0
Askie Lin
iT邦新手 5 級 ‧ 2019-09-29 20:31:37

踏上未知的旅程,終於!!!))

嘿啊!劇情走超慢,終於離開新手村。灑花)

0
yachen
iT邦新手 5 級 ‧ 2019-09-29 22:31:10

可是明天好像會下雨

很好。很融入劇情,是一民好玩家

0
RURU Tseng
iT邦新手 5 級 ‧ 2019-09-29 22:46:21

我,看著 Codepen,尋思著,原來,還,可以這樣操作

歡迎隔壁村樸實村民,再度蒞臨。

我要留言

立即登入留言