如何用 css style 替文字增加刪除線

替網頁文字增加刪除線是非常容易的事情,以前在 HTML 的網頁設計內,直接採用 strike 標籤就可以顯示刪除線了,但這樣的做法可能在未來會沒有效果,或是使用的設計師越來越少,我們可以透過 css 來處理這樣的文字刪除線效果,優點是目前主流的瀏覽器都支援 css 的語法,還可以透過 span 標籤,輕鬆的將網頁內的任何一個或數個文字加上刪除線。

用 css style 替文字增加刪除線需要使用的是 css 的 text-decoration 屬性,這個 text-decoration 除了可以標示刪除線之外,還可以用來標示出上線、底線等效果,不過本篇僅就文字刪除線做範例介紹,對於 text-decoration 其他效果有興趣的請自行參閱 Wibibi 的這一篇:CSS text-decoration,接著我們來看看 text-decoration 的文字刪除線語法與參數。
呈現的效果會像這樣:這行文字被加上了刪除線效果

範例使用到了 text-decoration 的 line-through 參數,相當簡單明瞭的參數,就是"線-穿越"的意思,用 span 把要增加刪除線的網頁文字,直接標上這個參數,就可以看到效果囉!這樣簡單的應用,可以輕鬆的將想修改的文字都分別修改。

有了這個 css 技巧,應該不用再使用 HTML 的 strike 標籤了吧!
分享於 2014-07-10