html - 当文本太长时跨度错位

Question

首先，有几个限制:

1. 我的 CSS 词汇量有限，所以我希望能在这方面接受一些教育，并且
2. 我唯一有权更改的是全局样式表。

我有一个称为面包屑的链接列表，如下所示:

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

当我按 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 上使用 overflow:hidden。虽然应该避免包装，但您可能会将长面包屑弄丢到容器的隐藏部分。

另一种解决方案，测量每个面包屑元素的宽度，当它接近容器的边界时，截断内容，例如通过替换“你在这里”之间的中间元素并用单个说出最后的两个/三个元素不可点击的省略号 (...) 元素。 例如:

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