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

我有面包屑菜单和一个长长的类别名称。当我在最后一个类别名称中添加文本溢出省略号时，前面的两个面包屑比最后一个更深。如何在面包屑中间得到一个相等的高度。< /P> 我做了一个Jsfiddle：

»  » 

---

谢谢

默认情况下，h1标记显示为块，而span元素显示为内联

display:inline不考虑添加到元素中的任何边距和/或填充，但是display:inline块则不考虑

如果更改#breadcrumbs h1的显示属性，此问题将得到解决。但是因为display:inline不考虑h1元素的宽度，所以溢出：省略号将被打断

因此，我建议使用flexbox

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

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

---

您应该在H1标记中添加以下css规则：

h1 {
    margin: 0;
    vertical-align: top;
}

---

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

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

---

非常感谢您进入。当我使用display:inline时，省略号不再起作用。有什么帮助吗？我写了我的答案，请让我知道它是否有效。你可以试试：

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