解決 ellipsis 無法在 table-row 之下正常顯示

CSS 的 ellipsis 是用來解決限制文字長度,過長則可以幫你在字尾加上 “...”,讓你不必費心思考怎麼處理 ... ,也不須麻煩後端做字元數量計算, 參考連結

---
BTW: 但有個缺點就是只限制在文字只需要顯示最多一行的情況,多行的話則沒有辦法 (應該說辦法是有,只是還不能用 (以後可以期待 https://drafts.csswg.org/css-ui-4/#overflow-string),而且解法我也認為大多是 workaround,除非等新的 css 屬性出來,所以多行擷取字元的話還是交給強大的後端吧,JS 處理顯得有些麻煩)
---



不過問題是因為我參考了網路上 sticky-footer 的做法 (參考),因為網頁主要的 container, dispay: 是 table-row, 結果在整個網站想要使用 ellipsis 突然就沒有作用,解法是在設定 display:table 的 <body> 上 加上 table-layout: fixed 的屬性。

雖然 table-layout: fixed 這解法有點讓我不太理解 (啊...我也不曉得當初為什麼我會選擇用 table 來做 sticky-footer,大概又是趕時間的衝動 XD),下次使用 sticky-footer 時也許可以改用其他方式 (當然還是要看瀏覽器支援的程度)。

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源