AI 創作品牌建造過程：我用 CJK 斷行修正拯救了碎掉的畫作標題

⚠️ 不合格／AI自動生成：這篇文章是 30 天 Blog 內容自動化實驗期間（2026-06-08～2026-07-01）由 AI 全自動生成，經內部審查後判定品質未達最低標準，僅保留作為歷史存檔。完整記錄與根因分析請見。

今日目標查詢：「AI 創作品牌建造過程」

搜尋意圖：資訊型

你每次在手機上打開自己用心用 AI 畫出來的畫作展間或品牌網站時，有沒有注意到你的作品標題被隨機切斷了？比如本來超有詩意的「夢境邊緣」，被切成「夢境邊」然後「緣」孤零零地掉到下一行。

這感覺有夠粗糙的對吧？這種文字被切碎的廉價感，真的會讓我們這些對視覺細節有強迫症的創作者渾身不對勁。但這真的不是你的問題，因為瀏覽器預設的中文換行機制太笨了，它覺得中文字與中文字之間都可以任意切斷。這不是你的設計美感有問題，這是所有繁中網頁排版都會遇到的結構缺陷。

說真的：有美學觀點才是護城河，網頁上的每一個字和你的畫作一樣，都是品牌美感的一部分。

我遇到的問題

這是我經營 aiart.tw 這個 AI 創作品牌進入第 15 天的日記。今天我用 `ChatGPT Image 2.0` 生了 3 套超滿意的大圖，正興奮地把它們放到我的畫廊展示區，結果用手機一看，差點暈倒。

畫作的標題「永恆的幻覺」，在手機螢幕上硬生生變成了「永恆的幻」然後「覺」掉到下一行。本來很酷的畫面，瞬間多了一種說不出的陽春感。

我以前接案的時候，遇到這種情況只能在程式碼裡手動塞 `<br>`。但現在我的讀者用各種不同尺寸的手機和電腦來看我的作品，手動微調根本沒完沒了，還會把其他螢幕的排版弄壞。我需要一個能自動適配的視覺解決方案。

我怎麼拆解

我決定在 aiart.tw 導入一套自動化的「CJK 繁中斷行修正外掛」。這套外掛的設計只花了我 10 分鐘，卻一次解決了 8 個畫廊展示區的標題亂切問題。

核心步驟其實非常簡單：

| 步驟 | 具體做法 | 視覺效果 |

|---|---|---|

| 1. 切詞 | 用瀏覽器原生的 `Intl.Segmenter` API 將中文句子切成有語意的詞彙 | 比如自動識別「永恆」與「幻覺」這兩個詞 |

| 2. 鎖定 | 用 CSS 的 `white-space:nowrap` 把每一個詞包起來 | 強制瀏覽器不能把這兩個字拆開換行 |

| 3. 平衡 | 在標題外層加上 `text-wrap: balance` | 讓瀏覽器自己找最均衡的邊界折行，不再頭重腳輕 |

這兩招一定要合在一起用。如果只用 `text-wrap: balance`，它只會追求兩行字數一樣，還是會把「永恆」拆成「永 / 恆」。必須先切詞、包 nowrap，再給 balance，標題才會完美的折行！

意外踩坑

在開發過程中，我本來想用 headless Chrome 截圖來自動驗證效果，結果因為我的網站有加 scroll-reveal 滾動淡入效果， headless 抓出來全是一片白畫面，我還以為是外掛把網站寫壞了。

後來我用「對照渲染」來比對：在同一個 HTML 檔案裡，左邊放沒有修正的標題，右邊套用外掛。當我看到右邊標題的「幻覺」牢牢貼在一起，而且整個畫面上都沒有孤兒句號的時候，強迫症終於被治癒了！

今天可以完成的小行動

說真的，我覺得做品牌和接案最大的差別，就是你終於有權利為了「字體換行好不好看」這種細節去堅持。以前幫客戶做設計，他們才不在乎標題有沒有被切碎，只想塞更多字。現在我經營 aiart.tw，就是要讓畫面上的每一個畫素、每一個字，都符合我對視覺的極致要求。

今天你可以花 5 分鐘做一個小動作：

第一，用手機打開你的作品集網站。 看看你的大標題，有沒有哪一個字被孤單地切到下一行了。

第二，如果你也想讓自己的創作以最完美的狀態被分享，可以前往 [aiart.tw](https://aiart.tw) 或是點擊下方連結。 查看我的完整建造過程，從 `/build` 開始，把這個繁中斷行修正掛載到你的網站上吧！