Question

我使用htmldiff gem来输出两个输入值之间的差异字符串。

此输出使用<ins>和<del>标记以及类.diffins，.diffmod和.diffdel的组合用于样式目的 - 到目前为止好的，我可以毫无问题地设计所有这些。

嗯，几乎没问题，下面是一些示例输出：

Here is some text that <del class="diffmod">will be</del><ins class="diffmod">has</ins> changed.

除了<del>和<ins>之间没有差距，这很好，但这可能是正确的，但对我来说并不合适。

我的问题是我尝试使用CSS来增加差距，但它并没有像我想的那样结束。这就是我到目前为止所做的：

.diffins {
  color: green;
}

.diffmod {
  color: blue;
}

del.diffmod + ins.diffmod::before {
  content: ' ';
}

.diffdel {
  color: red;
}

这会增加间隙，但<ins>标记的下划线样式会延伸到::before创建的空间中。正如你在这里看到的那样：

我尝试添加text-decoration: overline;，但这不起作用。

有什么想法吗？欢呼声。

Answer 1

您可以使用::before伪元素调整边距或填充，方法是display为inline-block，并将其内容设置为'\A0' - 是一个常规空间，但仅' '似乎没有任何效果：

＆＃13;

body {
  font: 32px/40px sans-serif;
}

del.diffmod + ins.diffmod::before {
  content: '\A0';
  display: inline-block;
}

＆＃13;

This is the <del class="diffmod">wrong</del><ins class="diffmod">perfect</ins> solution!

＆＃13;

Answer 2

为什么不做呢

ins {
   text-decoration: none;
}

这会杀掉整个街区的下划线但是我没有看到它的真正目的，因为它已经是一个不同的颜色

Answer 3

以现有代码为基础：

del.diffmod + ins.diffmod::before {
  content: '';
  display: inline-block;
  margin-left: .25em; /* approx 1 character */
}

没有要显示的实际内容（因此下划线/删除），并且边距位于em，因此对字体大小更改做出反应，

＆＃13;

.diffmod {
  color: blue;
}

del.diffmod + ins.diffmod::before {
  content: '';
  display: inline-block;
  margin-left: .25em;
}

＆＃13;

Here is some text that <del class="diffmod">will be</del><ins class="diffmod">has</ins> changed.

＆＃13;