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 時也許可以改用其他方式 (當然還是要看瀏覽器支援的程度)。
訂閱:
張貼留言 (Atom)
Vue multiselect set autofocus and tinymce set autofocus
要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...
-
有一次我在開branch的時候: $ git checkout -b winwu/dev 發生了這個錯誤: fatal: Not a git repository (or any of the parent directories): .git 不過,起因不是重...
-
最近工作常常在 windows 跟 Mac, Linux 上切換來切換去,發現在 Mac 掛磁碟機近來的 Repo 莫名其妙都進 git status 變成需要 diff 的檔案,明明也沒修改什麼,也有可能是因為用 afp 掛進來的,然後我也完全忘記有檔案權限這件事情,還好同事英...
-
//這其實是我一個多月前的練習了,突然想到我要記錄一下... 前言: 其實只是我好奇怎麼處理讓別人上傳圖片並且可以讓使用者作切圖的功能,那麼通常這樣的功能,搜尋的關鍵字叫做crop photo或是crop images,為甚麼叫做crop?,藉google翻譯一下才知道cr...
沒有留言:
張貼留言
若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD