Posts match “ word-break ” tag:

手動調整 Responsive 中日文斷行的實驗

前幾天,敝社的產品 Logdown 上了新翻譯完成的日文 Landing 首頁。這版 Landing 頁,我有做 Responsive Web Design1,讓網頁能稍微有點彈性地適應各種瀏覽寬度、而不至於看起來活像是壞掉。不過在日文的大標題填上去之後,稍微遇到了一個問題──他實際上佔的長度蠻寬的,比一開始的英文大標還要寬──而這讓他在小螢幕上面會產生斷行。

當然我可以透過 Media Query 的方法,確保他的字體在每個寬度都縮小到不致於斷到下一行,不過字體太小的標題顯然很難看起來像是「大標題」。試著實際拉了一下瀏覽器視窗,覺得還是讓他保留一定的字體大小而斷行比較好。不過在這邊引發我的興趣:要怎麼斷行,可以讓他盡量斷在「詞」的邊緣,而不是斷在「詞」的中間?

Read on