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

问题描述 投票:0回答:1

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

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

我可以注释掉这两行:

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

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

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

html css whitespace display
1个回答
0
投票

一个简单的方法是将属性

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
}
© www.soinside.com 2019 - 2024. All rights reserved.