如何在不断线的情况下赋予跨度高度？

Question

我正在尝试显示嵌套的跨度，每个跨度都有自己的高度和下划线，以便用户可以区分不同的跨度。 看这个jsfiddle

该示例还显示了“weduwe [..] Bouwensz”跨度如何打破线条，这是不应该发生的。

我可以注释掉这两行：

.nested-annotation {
  /* display: inline-block; */
  /* white-space: nowrap;   */

但是所有下划线都会崩溃，因为跨度失去了边距。

如何防止这种换行，而不使所有跨度下划线折叠？这可能吗？

Answer 1

一个简单的方法是将属性

line-height

添加到要增加高度的元素。

示例：

.nested-annotation {
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 2px;
    border-bottom: 1px solid;
    line-height: 30px;          <-- change to your desired height
}