1

首先，有几个限制：

  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 跨度不同的行是一些被划掉的样式：

F12 之后

而之前是：

F12 之前

所以，这一切都必须在 IE 中查看。我可以在某个选择器上使用 CSS 属性吗？

4

3 回答 3

1

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

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

    You Are Here: Projects > ... Msc 2012 >
于 2012-11-06T23:00:12.640 回答
0

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

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

于 2012-11-06T20:12:35.457 回答
0

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

我首先尝试用这样的东西来破解它：

#Breadcrumb {
  white-space: nowrap;
  width: 100%;
}
于 2012-11-06T20:33:43.120 回答