[css] 讓過長的內容省略為….,text-overflow的用法與說明

在網頁的許多地方可能會出現較長的段落,當文字過長時可能會影響排版及 UI。 我們可以利用 css 的 text-overflow 去做一個客製化的隱藏多餘文字。 這個屬性要記得搭配 overflow: hidden; (oveflow時隱藏)與 white-space: nowrap;(瀏覽器不換行) text-overflow clip  預設值,直接將字切斷 ellipsis 將過長的地方取代為 … 例: 上面例子 <span> 標籤多了 display:inline-block;,是因為 <span> 是行內(inline)元素,並不能設定寬度,因此必須改為 display: inline-block;。 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow

Continue reading


[css] word-break、word-wrap(overflow-wrap) 及 white-space 的差別與用法

剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space 利用這篇釐清這幾個的用法與差別 word-break:決定如何斷行單詞。 normal 瀏覽器預設的單詞斷行,可以看到英文會以詞斷行(不會將原詞切斷),中文則是以字斷行。 break-all 讓非CJK(Chinese、Japanese、Korean)語言的文字,任意斷行(以字斷行)。 keep-all 用詞斷行。 例: word-wrap:當詞斷行後的結果 overflow時,要如何處理 normal 保持在同一行 break-word 切斷詞並換行。 PS. 設定 word-break: break-all; 就不會 overflow,因此 word-wrap 並不會起作用。 例: white-space:決定如何處理元素中的空白字元及斷行。 normal 預設連續空白時瀏覽器會忽略空白(還會省略開頭多餘的空白),只會視為一個,若 overflow 則自動換行。 nowrap 直到遇到 <br /> 之前都不換行,就算你再設定 word-wrap: break-word; 也不會換行。 pre 依原空白字元及排版顯示,overflow 仍不換行。 pre-wrap 保留原排版及空白字元,在 overflow時會自動換行 pre-line 保留原排版,會合併多餘的空白,overflow 自動換行。 PS. 詳細請看參考資料之網址 例: 參考資料: http://abgne.tw/css/css3-lab/css3-word-break.html […]

Continue reading


[HTML、CSS] 載入圖片失敗時,純 CSS 替代處理方法

當我們在網頁中載入外部圖片時,時常會使用 HTML 的 <img> 標籤 src 來嵌入圖片來源,這也是其中一個可以允許發送跨域請求的 HTML 標籤。 PS. 跨域請求:簡單來說就是可以載入任意網域的外部資源,因此常是 XSS 的攻擊方式之一。(這邊不多談) 若外部網域發生錯誤,圖片無法正常顯示則會產生一個醜醜的小縮圖,如以下範例: 因此若你的網站有大量外部資源圖片,就可能因為圖片載入失敗而影響排版與視覺觀感。   其實預設在 <img> 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功 onload:當圖片成功載入時觸發此事件。 onerror:當圖片載入失敗時觸發此事件。 onabort:當使用者手動中斷此圖片的載入,如:點擊瀏覽器左上角的停止載入按鈕。 我們可以透過以下的程式碼來測試以上情況所觸發的事件 PS. 在瀏覽器按下 F12,選擇主控台或 console 即可看見不同情況的輸出訊息。 因此大家可能會想,那就可以利用此事件。當圖片載入發生錯誤,我們就將 src 替換為替代圖片。 因此可寫出如以下的程式碼 <img src=”404.jpg” onerror=”this.src=’noimage.jpg’” /> 但是以上這段程式碼可能會發生無窮迴圈而無止盡執行的錯誤。 若 noimage.jpg 也發生錯誤,就會導致無止盡的替換 src ,但又無止盡的發生錯誤,造成網頁的崩潰。 以上說了這些事件,是希望大家能對事件有初步的了解及可能的應用。 再來我們進入主題,可以如何使用CSS來做取代圖片 首先我們來看 <img> 這個標籤,當讀取圖片失敗時有沒有什麼特性。 <img src=”404.jpg” alt=”圖片讀取失敗” /> 若圖片讀取失敗,會將 alt […]

Continue reading


[CSS] CSS 的 !important 使用

相信有寫過 CSS 的朋友都知道 CSS 的優先性: inline-style > id > class。 selector 越明確的話優先度越高,如 p.text > p 但是,如果有用過 CSS 框架(bootstrap、angular-material)的,可能就會發現有些 CSS 被設置了 !important。由於會增加後續維護困難,在平常可能比較少見。 因此我們來看一個 <p> 標籤若被設置 style、class、id 與 !important 各種不同顏色。 試著移除CSS後,可以發現優先序為:!important > inline style > id > class 由此可知,!important 會優先於其他的 selector 設定的 CSS。 因此使用大量的 !important 將會導致覆寫複雜及除錯困難,可以的話盡量少用。

Continue reading


[CSS] CSS3 屬性 will-change 如何使用

css3 新增了一個屬性為 will-change,這個屬性用於提示瀏覽器此元素可能有 CSS 的改變(如:transition、transform等等),讓瀏覽器可以針對 CSS 改變先做處理。 根據 mozilla 開發者文件上面有列出幾點注意事項 不要將多個元素都設上 will-change,這樣瀏覽器會嘗試優化所有元素而消耗過多的機器資源,進而使網頁變得更慢。 在適當的時機加上 will-change。若我們一開始就在 stylesheet 對元素加上 will-change ,會導致瀏覽器一直對此元素做優化而消耗資源,我們應該適時的使用 script 等方式適當的加入、移除 will-change 屬性。  若網頁已非常順暢,就不要再多加 will-change,過多的 will-change 反而會造成記憶體的消耗及衍生效能問題。 給予足夠時間預先加入 will-change 屬性。 接下來,我們來看看,什麼是在適當時機使用 will-change 屬性 錯誤用法 1: 錯誤用法2: 雖然比用法1好很多,但可想而知,大多數元素不可能無時無刻都可能改變。 錯誤用法3: 當 btn 點擊後改變透明度 比較好的用法: 適時的加入及移除 will-change 屬性 當 btn 點擊後改變透明度 你可能會問如果是想要滑鼠移至按鈕時改變呢? 你可以這樣寫 當然,除了上面 CSS 的寫法,我們也可以使用 javascript 去動態加入及移除 will-change […]

Continue reading