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 に戻ると、dnn_dnnBreadcrumb_lblBreadCrumb スパンで異なるように見える TraceStyles の唯一の行は、取り消し線が引かれたスタイルです。

F12 後

以前は：

F12 前

したがって、これはすべて IE で表示する必要があります。これを機能させるセレクターまたは別のセレクターで使用できる CSS プロパティはありますか?

4

3 に答える 3

1

厄介なことですが、コンテナ #Breadcrumb でoverflow:hiddenを試すことができます。ラッピングを防ぐ必要がありますが、コンテナの隠れた部分に長いパンくずが失われる可能性があります.

別の解決策として、各ブレッドクラム項目の幅を測定し、コンテナーの境界に近づいたら、たとえば「ここにいます」間の中間項目を置き換えてコンテンツを切り捨て、最後の 2 つまたは 3 つの項目をクリックできない単一の項目で言います。省略記号 (...) 項目。例えば：

    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 に答える