今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 W3School 卻發現 CSS 中沒有雙刪除線這東東...

於是又花了半天, 好不容易才試出來. 這種作法有幾個好處:

  1. 支援跨多行的刪除線, 也可以在項目列表中使用. (我在 Google 中找到好多不同的作法, 都是不支援跨行, 或者沒辦法在 <ul><li> 和 <ol><li> 底下使用的).
  2. 利用原本 <del> tag 的功效, 即使用 CSS 設定失效時, 依然可以有單刪除線.
  3. 刪除線不因字體大小而徧移位置.
  4. 刪除的部份為一個整體, 不會因刪除內容有上標字或下標字而分段 (高低不同).

下例中的 .article-content-inner 是因為要在痞客邦中使用才加上去的. 第 22 行是使用的例子. (用 <del> 和 <span class='del'> 把要刪除的文字括住即可)

<style type='text/css'>
...
.article-content-inner span.add     { color:navy; }
.article-content-inner del {
	padding:0; margin:0;
	position: relative;
	top:calc(0.75em + 1px);
	left: 0;
	text-decoration:none;
	display: inline;
	border-top:calc(0.25em - 1px) double red
}
.article-content-inner del > span.del {
	padding:0; margin:0;
	position: relative;
	top:calc(-0.75em - 1px);
	left: 0;
}
...
</style>
<body>
<p>原來的本文<del><span class='del'>這一小段要<sup>不要</sup>刪除</span></del>繼續原來的本文</p>
</body>

顯示的效果, 如下: (圖片)

CSS Double Strikeout

雙刪除線效果圖

或者: (你的 Browser)

原來的本文這一小段要不要刪除下標字繼續原來的本文

2024/09/08 更新

發現原來的方法有個小缺點, 就是: 如果和我自己的圖片放大效果一起用時, 刪除線會出現在最前面一層, 蓋在圖片上. 因此, 有了第二個版本. 這次我直接使用 text-decoration 自身的設定. 除了雙刪除線之間的間距小了一點, 其他一切完美 (上標字, 下標字及不同大小的字體除外 😠😭) . 設定修改成如下的樣子:

<style type='text/css'>
...
.article-content-inner del {
	text-decoration:red line-through double;
	-webkit-text-decoration-line:line-through;
	-webkit-text-decoration-color:red;
	-webkit-text-decoration-style:double
}
.article-content-inner del > span.del { }
...
</style>
<body>
<p>原來的本文<del><span class='del'>這一小段要<sup>不要</sup>刪除<sub>下標字</sub></span></del>繼續原來的本文</p>
</body>

其中, -webkit-開頭的三個設定項是因為 Apple 公司的 safari 的 text-decoration 設定項目前暫時不支援 double 這個 style, 只能先加上-webkit-開頭的這三個設定項.

還有, 一個附加好處: <del> tag 後面的 <span class='del'> tag 可加可不加了, 方便了許多.

顯示的效果, 如下: (圖片)

新的雙刪除線效果

新的雙刪除線效果圖

或者: (你的 Browser)

原來的本文這一小段要不要刪除下標字繼續原來的本文

原來的本文這一小段要不要刪除下標字繼續原來的本文

第二行是把原本 <del> tag 包住的範圍依上標/下標字的範圍打成數段, 然後把 <del> tag 移到 <sup> tag 及 <sub> tag 裡的效果.

在 PC 上你應該看到這二行的效果是不一致的 (因為 pixnet 的原故??), 而手機 (我的 iPhone 13) 上這二行的效果是一致的 (safari, chrome, edge 都一致).

2024/09/28 更新

修復不了, 還是忍痛把刪除線的設定倒回去. 不過為了本篇的顯示二種刪除線的效果, 多學到了一個很少用的 CSS 技巧. { all: revert }. 待會兒寫一篇記錄一下. 完成了: "CSS: 取消繼承來的 CSS 設定".

2024/10/01 更新

忘了第一組雙刪除線設定還有一個問題沒有解決: <var> tag 和 <kbd> tag 疊在雙刪除線上面. 不過它實際上是和 backgound 設定相關: <del> tag 如果設定了 backgound 或者 backgound-color 都會覆蓋掉雙刪除線 (border) 設定.

2024/10/04 更新

2024/10/01 記錄的問題解決了. 解法的思路和 position:relative 及 z-index 有關.

  • 首先, 由於第一組雙刪除線設定使用了 position:relative 的設定, 所以 <var> tag 和 <kbd> tag 也必需設為 position:relative.
  • 再來是 z-index 的設定值:
    • 由於正常的 <var> tag 和 <kbd> tag 並沒有層次上的問題, 所以 z-index 可以不設 (即: 使用 z-index:auto).
    • 但是包在 <del> tag 內的 <var> tag 和 <kbd> tag, 其 z-index 值必需設定為負數 (設為正數無法將其 backgound-color 拉到雙刪除線下方). 這裡我們將它設為 z-index:-10.
    • 但是負數的 z-index 會使它消失, 所以再來就是我們必需把 <del> tag 的 z-index 值設定成 ≥0 的數值. 才能使 <var> tag 和 <kbd> tag 重新回到顯示狀態. 這裡我們將它設為 z-index:10.

所以修正後的第一組雙刪除線 CSS 設定, 必需增加如下的設定:

/* del 的 z-index 必需 ≥ 0 */
del { z-index: 10; }

/* kdb 和 var 改為 relative */
kbd, var { position:relative; }

/* del 包住的 var, kbd 其 z-index 必需為負數 */
del kbd,
del var { z-index:-10 }

Browser 顯示例:

雙刪除線內有 <var> tag 及 Shift+Alt+S內有像 <var> tag 這類自帶 background-color 屬性的例子.

2024/10/16 補漏

忘了記錄圖片放大功能和第一組雙刪除線衝突的解決方法了: 解決思路與 <var> tag 和 <kbd> tag 的相同.

只要為放大後的圖片所使用的 CSS 加上 position:relative, 讓放大後的圖片和雙刪除線同為 relative. 再用 z-index:20 拉高它相對於雙刪除線的位置, 即可解決. 不過, 由於前面的 <var> tag 和 <kbd> tag 用了 z-index:10, 所以圖片用的 z-index 必需大於 10, 此處為 20.

input:checked + .img_tag { position: relative; z-index:20; cursor: zoom-out; overflow:visible }

arrow
arrow
    文章標籤
    css double strikeout double striketrough stylesheet 痞客邦
    全站熱搜
    創作者介紹
    創作者 MagicJackTing 的頭像
    MagicJackTing

    傑克! 真是太神奇了!

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄