文本过长时跨度不对齐答案

【问题标题】：Span Misaligns when Text gets too Long文本过长时跨度不对齐
【发布时间】：2012-11-06 20:02:31
【问题描述】：

首先，有几个限制：

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

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

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

当我按 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 属性吗？

【问题讨论】：

标签： html css content-management-system dotnetnuke

【解决方案1】：

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

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

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

【讨论】：

这行得通：#Breadcrumb {溢出：隐藏； }

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果不查看 DOM 的其余部分，真的很难知道，但似乎 #dnn_dnnBreadcrumb_lblBreadCrumb 只是被放大并且不再适合其容器元素 (#Breadcrumb)。因此它会换行。

我会先尝试用这样的方式破解它：

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

【讨论】：