文本变得太长时，跨度不对齐

Question

首先，有几个限制：

1. 我的CSS词汇量有限，所以我很欣赏这方面的教育，
2. 我唯一有权改变的是全球样式表。

我有一个名为breadcrumb的链接列表，如下所示：



除非增加文本大小或子元素数量，否则它看起来像这样：



当我按F12并查看HTML时，它看起来像这样：

<div id="Breadcrumb">
    <span id="dnn_dnnTEXT_lblText" class="Intro">You are here:</span>
    <span id="dnn_dnnBreadcrumb_lblBreadCrumb">
        <a class="SkinObject" href="https://www.c-ied.org/Projects.aspx">Projects</a>
        <span class="Sep"></span>
        <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities.aspx">Capabilities</a>
        <span class="Sep"></span>
        <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative.aspx">Maritime Initiative</a>
        <span class="Sep"></span>
        <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012.aspx">MSC 2012</a>
        <span class="Sep"></span>
        <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012/6June.aspx">6 June</a>
    </span>
</div>

这是在DotNetNuke CMS中，所以我可以进入网站设置并弄乱样式表编辑器。我在那里尝试的任何东西都没有任何影响，除了#dnn_dnnBreadcrumb_lblBreadCrumb {width: 100%}使它看起来更糟糕。

我还采用了上面的HTML并将其放在我在另一个模块中添加的一些文本模糊上面。在那里，它看起来很好。再次返回到F12，TraceStyles中对于dnn_dnnBreadcrumb_lblBreadCrumb范围看起来不同的唯一行是一些划掉的样式：



在此之前：



所以，这一切都必须在IE中查看。是否有一个我可以在某个选择器或其他选项器上使用的CSS属性可以使它工作？

Answer 1

令人讨厌，你可以试试溢出：隐藏在你的容器#Breadcrumb上。虽然应该防止包装，但是你可能会丢失长的面包屑到容器的隐藏部分。

另一种解决方案，测量每个痕迹物品的宽度，当它接近容器的边界时，截断内容，例如通过替换“你在这里”之间的中间项目，并用一个单词说出最后的两个/三个项目不可点击的省略号（...）项目。 例如：

    You Are Here: Projects > ... Msc 2012 >

Answer 2

看起来像面包屑的font-size已设置为特定的像素值。您可能还需要将line-height设置为特定的像素值。

（虽然这不太理想。用户应该能够增加文字大小。）

Answer 3

如果没有看到你的其他DOM，真的很难知道，但似乎#dnn_dnnBreadcrumb_lblBreadCrumb正在被放大，不再适合它的容器元素（#Breadcrumb）。因此它包装。

我首先尝试使用以下内容进行黑客攻击：

#Breadcrumb {
  white-space: nowrap;
  width: 100%;
}