CSS中的文本装饰无法正常工作

Question

我正在使用此代码在javascript中实现文本差异。该代码可以正常工作。

然后，我尝试添加文本装饰，以使句子的错误部分有一行，如下所示：

问题是CSS中的text-decoration: line-through;无法正常工作。

这是我尝试添加文字装饰的CSS：

注意：我可以在此处更改文本和背景颜色，但是文本装饰不起作用！

del ：不正确的红色部分

插入：正确的绿色部分

del {

    text-decoration: line-through !important; 
    color: #b30000;
    background: #fadad7;
}
ins {
    background: #eaf2c2;
    color: #406619;
    text-decoration: none;
}

Js是一个图书馆，如果您想看看它，请随时提问。但这是唯一包含 ins 和 del 的部分：

  convertChangesToXML: function (changes) {
            var ret = [];
            for (var i = 0; i < changes.length; i++) {
                var change = changes[i];
                if (change.added) {
                    ret.push("<ins class='diff'>");
                } else if (change.removed) {
                    ret.push("<del class='diff'>");
                }

                ret.push(escapeHTML(change.value));

                if (change.added) {
                    ret.push('</ins>');
                } else if (change.removed) {
                    ret.push('</del>');
                }
            }
            return ret.join('');
        },

Answer 1

这一定是一个奇怪的问题，对我来说很好：

hi{
text-decoration: line-through !important;
}

<hi class="hi">Hallo</hi>

如果这对您不起作用（以某种方式？），您仍然可以返回包含内联样式的字符串，如下所示：（这应该一直有效）。

ret.push("<ins class='diff' style='text-decoration: line-through;'>");