1

Web サイトのブレッドクラムを作成したいと考えています。

要素は、使用可能なすべてのスペースを埋めるように拡張する必要があります。収まらない場合はtext-overflow: ellipsis、最後のテキストを除いて、内側のテキストを で切り取ってもらいたいです。

つまり、最後の要素を全幅で配置し、他の要素を残りのスペースに分散します (幅はコンテンツに応じて、または可能でない場合は少なくとも見栄えが悪くならないようにします...)。

このコードで試しました。

<div>
    <ul>
        <li>paka</li>
        <li>ultrapaka</li>
        <li>ultrapaka</li>
        <li>ultrapaka ultrapaka</li>
        <li>daslidjsajdsa</li>
    </ul>
</div>

ここにCSS：

div {
    display: table;
    margin: 5px;
    border:1px solid #777;
    padding: 3px;
    table-layout:fixed;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
    padding: 5px;
    border: 1px solid #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

テーブルを配置table-layout: fixedすると、実際にそのスペースが制限されますが、自動セル幅が失われます。

入れないと、テーブルが限界を超えてオーバーフローするだけです。

ここで JsFiddle を見つけることができます。(最終的なソリューションでは 100% で拡張する必要がありますが、目的の効果を表示するためにテーブルの幅を 400px に設定しました)。

4

1 に答える 1