3

水平に配置されたいくつかのアイテムがあります。

  1. 常に 1 つの行にとどまります (改行しないでください)。
  2. コンテンツまたは最大幅のいずれか小さい方よりも幅を大きくしないでください。
  3. max-width が幅を制限する場合、楕円で切り捨てます。
  4. 最小幅よりも小さい幅であってはなりません。

これらのアイテムは同じ親を共有しています。親の幅が小さすぎて上記のルールを使用して項目を含めることができない場合、項目は幅方向に縮小されますが、最小幅よりも細くなることはありません。

編集: つまり、親が子の合計幅よりも大きい場合、それは問題ありません。子は親を埋めるために展開されるべきではありません。番号 1、2、3、および 4 が示すように、親が子の合計幅よりも小さくなる場合、子は新しい親の幅内に収まるように縮小する必要があります。この例 (および実際に再現しようとしているもの) は、Chrome のブラウザー タブで確認できます。タブには最大幅と最小幅があります。ブラウザーの幅方向の縮小を開始すると、タブが収まりきらないところまで到達し、最小幅に達するまで縮小を開始します。

1、2、3、および 4 の数字を突き止めましたが、親の幅内に収まるように縮小する方法がわかりません。どんな助けでも大歓迎です。

HTML の例:

<div class="container">
    <div class="tab"><span>Bookmark</span></div><div class="tab"><span>Finish</span></div><div class="tab"><span>A</span></div><div class="tab"><span>Kala kazoo A Roosky Fantastic</span></div>  
</div>

CSS の例:

.container {
    border: 1px solid blue;
    white-space: nowrap;
}

.tab {
    display: inline-block;
    border: 1px solid red;
}

.tab span {
    display: inline-block;
    width: 100%;
    min-width: 20px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/ug3en/

対象ブラウザ: IE9+、最新の Chrome、最新の Firefox、最新の Safari。

4

2 に答える 2