3

私は多くの同様の質問を見てきましたが、私がやろうとしていることを満たすものは見つかりませんでした。私のサイトにはパンくずリストがあります。現在、HTML は次のようになっています。

<div class="breadcrumb">
    <span>Home</span>
    <span>Section</span>
    <span>Subsection</span>
    <span class="last">current page</span>
</div>

いくつかのことが起こる必要がありますが、理解できません。パンくずの最終的な書式設定は別個のセクションのように見えるため<div>、前のスパンの終わりから囲みの終わりまでの残りのスペースを埋める必要があります。セクション。<span><span class="last">

囲んでいるビューの幅 (最大幅は 960 ピクセルですが、それよりも小さい場合もあります) が狭すぎてすべてを表示できない場合、最後のダイブはどんどん小さくなり、text-overflow などを使用して (それ自体をラップするのではなく) その中のテキストを切り詰める必要があります。 : 省略記号;.

言い換えると：

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda     ]|

ウィンドウが縮小すると、次のようになります。

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Meeting Agenda]|

さらに次のようになります。

|[home][Agendas][Animal Service Center][12/23/2012: ASCMV Me...]|

これはCSSで実行できますか？私が遊んだものはうまくいきませんでした。

4

2 に答える 2

1

さて、省略記号を除いてすべてをそこに入れることができました: demo here。

まず、あなたの HTML を狂ったようにクリーンアップしました。クラムトレイルのようなナビゲーション要素<nav>は HTML の要素にある必要があり、そこにあるアイテムのリストは、論理的<ul>にどこにでもあるようなものです。さらに、不要なすべてのクラスを削除しました。結果は次のとおりです。

<nav id="crumbtrail">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Section</a></li>
        <li><a href="#">Subsection</a></li>
        <li><a href="#">current page</a></li>
    </ul>
</nav>

CSS は、そこに飛び込んで、私が何をしたかを理解しようとする以上のことを推奨することはできません。

nav {
    font-family:Tahoma,Arial,sans-serif;
    color:white;
    max-width:500px;
}
nav ul {
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-current.png) no-repeat right;
    font-size:0;
    height:27px;
    line-height:27px;
    list-style:none;
    white-space:nowrap;
    overflow:hidden;
}
nav li {
    background:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-left.png) no-repeat left;
    font-size:10pt;
    height:27px;
    display:inline-block;
    position:relative;
}
nav li:after {
    content:url(http://wasimshaikh.com/demo/breadcrumbs/bcnav-right.png);
    position:absolute;
    z-index:5;
    top:0;
    right:-16px;
}
nav li a {
    color:white;
    display:block;
    height:100%;
    width:100%;
    padding:0 16px 0 32px;
    text-decoration:none;
}
nav li:first-child a {
    padding-left:16px;
}
nav li:last-child {
    background:none;
    border:0;
}
nav li:last-child:after {
    content:none;
}

結果からわかるように、それは機能します。Chrome の最新ベータ版、FF20、IE9、IE10 でテストしましたが、すべて同じ結果を示しています。この crumbtrail の作成において、Javascript の 1 行も損なわれませんでした。

省略記号をそこに入れるためにあらゆることを試しましたが、ブラウザはインライン要素でのみそれを許可することに本当にうるさいので、を使用せずにスタイリングを行うことはできませんinline-block. それで、それはゲームから外れています。理論的には、そこにいくつかの JS をパッチして、それが本当に重要であればそれを行うことができますが、これもうまくいくと思います。

楽しみ ：）

于 2013-05-07T22:43:27.373 に答える