× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》

Web 上中文與英文混的字框-要如何限定長度與高度?

紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • Rails 如何檢查 URL 是否存在?
  • Rails 為什麼要使用 escape_javascript?
  • Rails 使用 Javascript Ajax 很簡單
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2018/04/04
38   0  

Clamp: 夾子、夾緊

在網頁上排版,我們最常希望的就是設定一個固定大小的框,但是如果碰到中文與英文混合的情況,最討厭的就是,很難這定他們的長度與高度,怎麼弄他們的長度不一樣,下面就是一個例子:

"寫一本新書 - a book".mb_chars.limit(15).to_s = "寫一本新書"

"寫一本新書 - a book".truncate(15) = "寫一本新書 - a book"

"abcdedghijklmnopq".mb_chars.limit(15).to_s = "abcdedghijklmno"

"abcdedghijklmnopq".truncate(15) = "abcdedghijkl..."

"寫一本新書 - a book".mb_chars.limit(20).to_s = "寫一本新書 - a "

"abcdedghijklmnopq".mb_chars.limit(20).to_s = "abcdedghijklmnopq"

也就是說,我們在 server 上,因為 UTF8 的不定碼數特性,我們不能用 byte 數,或是字元數來算字串寬,要算高,那更是不可能,所以,這造成我們不能用 turncate 簡單的得到一個固定長度字串,更討厭的是,連 length 都是轉換過的,例如:

length 回應的是字元數目:"寫一本新書 - a book".length = 14 ,中文英文都會算是一個字元,夠討厭吧!還不要算在作業系統或是瀏覽器上,文字會因為字體有大小寬度(kerning)改變。所以,第一個結論是:

UTF 中文與英文混的字框的確實高寬,是不能在 Server 上設定的。

用 Server 後台算是不對的,那就只能用前台了,還好,以下的 CSS -webkit-line-clamp 好像救星:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 行數

 要更安全的,可以加上 fallback,例如:

line-height: 16px; 
max-height: 32px; 

在這裡,line-height = N,在本例中可以是16px, 2rem,... 等等,max-height 是 = N * 行數,在本例中就是 16px * 2 or 2rem * 2。

討厭的是,-webkit-line-clamp,不是所有的瀏覽器都能用,IE 是一定不能用的,Edge 跟 FireFox 也不能用就很討厭!所以,要安全的話,要加寫支援,大概是這樣:

@supports (-webkit-line-clamp: 4) { 
div {
-webkit-line-clamp: 4;
}
}
@supports not (-webkit-line-clamp: 4) {
div {
line-height: 2rem;
  max-height: 4rem;
}
}

webkit-line-clamp 是個還化外之地,有不少怪怪的問題:

中文支援:在這篇介紹中,說 line-champ 一定要找空白,所以連在一起的中文不能用,我倒是發現中文可以用,沒問題,但是有發現在 Mac Safari 上有出現怪字,我認爲這是 Safari 的問題。 另外,當文字是被 <p> 包起來時(在 rails 中,我們常用的 simple_format 輸出),會發生 「...」不見得問題,這算是個中問題!

斷句的點:webkit-line-clamp 斷的點真的很奇怪,要給他搞怪一百分,中文其實還好,但是英文我有發現 general 給你斷在 gene... 一整個無言,這樣其實問題很大,有些英文斷在不該斷的地方會出事的,中文的問題現在還沒看到,這些讓我覺得 webkit-line-clamp 像是未開發完全,這也是啦,不然大家早就用了。

那,webkit-line-clamp 到底可不可以用呢?好問題,我也不知道,但是我很想用,我是先用 rails 中,我們常用的 simple_format 輸出,simple_format 會將文字依斷句,轉包在 <p> 中,再用 webkit-line-clamp,來輸出,很好用,問題好像也不大,唯一就是英文斷句,這有點恐怖,所以,結論二:

如果你不怕英文亂斷字,可以用 webkit-line-clamp

那要是客戶罵,說斷句錯誤?那我就會換回來,再繼續用 server 來大概算行數了。 

後記:我最後還是放棄了,這   webkit-line-clamp 的行為真的不好預測,而且相當的 bugy,在 Windows 上好像還好,但是在 Safari 上,我試了 iOS 及 Mac,有時整段都不會顯示,有時又會,更吊詭的是,進入開發模式,改了其中的一個值,本來不顯示的又會了,在調回原來不顯示的值,還是可以顯示,所以,放棄,這就是要用怪怪 CSS 的辛苦處,你要試很多很多的 browsers,但是永遠有更多的例外。

 

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: 中文固定行數 x 1 line-clamp x 1 css x 1 rails x 27

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入