Question

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

我做了一个Jsfiddle：

    <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>

谢谢

Answer 1

默认情况下，h1标签显示为 block ，而跨度元素则显示为 inline 。

显示：内联不尊重您添加到元素中的任何边距和填充，但是显示：内联遵守。

如果您更改#breadcrumbs h1的显示属性，则将解决此问题。但是由于display：inline不会尊重h1元素的宽度，因此您的溢出：省略号将被破坏。

因此，我建议使用flexbox。

#breadcrumbs {
  display: flex;
  align-items: center;
}

我强烈建议您阅读本指南以了解正在发生的事情：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您应将以下css规则添加到您的H1标签：

union all

Answer 3

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

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

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

3 个答案: