css - 面包屑中的文本溢出省略号-高度

我有一个带有长类别名称的面包屑菜单。当我在最后一个类别名称中添加文本溢出省略号时，之前的两个面包屑要比最后一个面包屑深。如何在面包屑中间获得相等的高度。

我做了一个Jsfiddle：

https://jsfiddle.net/0rdeyhst/

    <div itemprop="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">
<span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="icon-home"><a itemprop="item" href="#" accesskey="h"><span itemprop="name">Home</span><meta itemprop="position" content="1"></a></span>
&nbsp;»&nbsp;<span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#" itemprop="item"><span itemprop="name">Caegory</span></a><meta itemprop="position" content="2"></span>&nbsp;»&nbsp;<span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#" itemprop="item"><h1><span itemprop="name">This is a long category name adsfl lkajdlfjasldfjasdfasdf asdfadf</span></h1></a><meta itemprop="position" content="3"></span>
</div>

谢谢

最佳答案

默认情况下，浏览器将边距设置为标签，并且隐藏的溢出会导致一些文本对齐问题。因此，您应该将这2个属性添加到CSS中

#breadcrums h1 {
    margin: 0;
    vertical-align: middle;
}

关于css - 面包屑中的文本溢出省略号-高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56109805/