2

ロゴの横にブレッドクラム バーを配置しようとしています。Web サイトは 1000px から 400px に拡大縮小することになっているため、パンくずリストが長すぎる場合に備えて、省略できるとよいでしょう (パンくずリストのテキストはロゴと水平方向に配置されるため、新しい行を開始することはあまり意味がありません)文章）。

ASCII アートとしての望ましい外観:

すべてのテキストが収まるとき:

  /-\
  \-/
COMPANY    Breadcrumb > Breadcrumb > Breadcrumb

縮小時:

  /-\
  \-/
COMPANY    Breadcrumb > Breadcru...

私のHTMLは現在次のようになっています：

<div>
    <a href="...">
        <img src="logo"/>
    </a>
</div>
<div style="position: absolute; top: 50px; left: 0px; overflow: hidden; text-overflow: ellipsis; min-width: 400px; white-space: nowrap; max-width: 100%;">
    <a href="..." style="margin: 0 0 0 100px;">Top Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">2nd Level Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">3rd Level Crumb</a>
</div>

さて、最後の表示されたブレッドクラムに省略記号を適用するにはどうすればよいですか (すべての固定幅を設定せず<span>に<a>?

（それが十分に明確であることを願っていますが、質問に喜んでお答えします。）

4

1 に答える 1

1

http://jsfiddle.net/C97kC/を参照してください

取り除くだけmin-width: 400px

CSS:

#div{
    position: absolute; top: 50px; left: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

HTML:

<div>
    <a href="...">
        <img src="logo"/>
    </a>
</div>
<div id="div">
    <a href="..." style="margin: 0 0 0 100px;">Top Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">2nd Level Crumb</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="...">3rd Level Crumb</a>
</div>​

編集：

幅を 400px 以上にしたい場合は、手持ちのコードを使用できます。問題は、テキストが十分に長くないことです。

あなたが使用する場合...

<a href="..." style="margin: 0 0 0 100px;">Top Crumb</a>
<span>&nbsp;&gt;&nbsp;</span>
<a href="...">2nd Level Crumb</a>
<span>&nbsp;&gt;&nbsp;</span>
<a href="...">3rd Level Crumb</a>
<span>&nbsp;&gt;&nbsp;</span>
<a href="...">4rd Level Crumb</a>

...省略記号が表示されます。

デモ: http://jsfiddle.net/C97kC/1/ </p>

于 2012-09-03T12:53:24.777 に答える