テキストオーバーフロー：省略記号とフレックス

Question

私はdisplay: flexプロパティセットを持つコンテナ要素を持っています。 子供の幅は固定されており（flex: 0 0 auto）、もう1つはno（flex: 1）です。フレキシブルな子供にはいくつかの子供がいます：このコンテナ（inner）は、親の幅に応じて子供をクリップします。

私はこれを行うことができましたが、コンテンツがクリップされた場合（子供の数は固定されていません）、省略記号をにオーバーフローさせたいと思います。

これは私のコードは、これまでのところです：ここでライブ

.outer { 
    border: 1px solid red; 
    display: flex; 
    width: 400px; 
} 

.inner { 
    display: flex; 
    min-width: 0; 
    overflow: hidden; 
    flex: 1; 
    text-overflow: ellipsis; 
} 

.child { 
    display: inline-block; 
    white-space: nowrap; 
    flex: 1; 
    border: 1px solid blue; 
} 

.btn { 
    border: 1px solid green; 
    flex: 0 0 auto; 
} 

：http://jsbin.com/niheyiwiya/edit?html,css,output

どのように私は、次の目的の結果を得ることができますか？ （ハックは歓迎！ - CSSをのみしてください）

Answer 1

あなたのレイアウトを持ついくつかの問題があります。

1. text-overflow: ellipsisのみdisplay: blockとdisplay: inline-blockコンテナで動作しますが。 .innerがdisplay: flexに設定されているため、失敗しています。

2. text-overflow: ellipsisは、同じ宣言にwhite-space: nowrapを含める必要があります。あなたの.innerルールに欠けています。

3. 省略記号は、テキスト上で動作ではなく、ブロックレベル要素

これを試してみてください：

* { 
 
    margin: 15px 1px 
 
} 
 
.outer { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    width: 400px; 
 
} 
 
.inner { 
 
    /* display: flex */   /* removed */ 
 
    min-width: 0; 
 
    overflow: hidden; 
 
    flex: 1; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap;   /* new */ 
 
} 
 
.child { 
 
    display: inline;    /* adjusted */ 
 
    white-space: nowrap; 
 
    flex: 1; 
 
} 
 
.btn { 
 
    border: 1px solid green; 
 
    flex: 0 0 auto; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="child">child 1</div> 
 
    <div class="child">child 2</div> 
 
    <div class="child">child 3</div> 
 
    <div class="child">child 4</div> 
 
    <div class="child">child 5</div> 
 
    <div class="child">child 6</div> 
 
    <div class="child">child 7</div> 
 
    </div> 
 
    <div class="btn">My big big big button!</div> 
 
</div>

ここtext-overflow: ellipsisについての詳細：Applying an ellipsis to multiline text

Answer 2

ここでは、childは、ボタンの位置に溢れた位置を持っており、そのdivの後にすべてのdivを隠し、その後...を追加DIVた見つけることができるJSのアプローチがありますdiv。

var child = $('.child'); 
 
var btn = $('.btn'); 
 
var oW = $('.outer').innerWidth(); 
 
var w = btn.outerWidth(); 
 
var c = oW - w; 
 
var last; 
 

 
child.each(function() { 
 
    var l = $(this).position().left + $(this).outerWidth(); 
 
    if (l > c) { 
 
    if (last == undefined) last = $(this).index() - 1; 
 
    } 
 
}) 
 

 
$('.child:gt(' + last + ')').css('display', 'none'); 
 
$('.child:eq(' + last + ')').after(' ...')

* { 
 
    margin: 15px 1px 
 
} 
 
.outer { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    width: 400px; 
 
} 
 
.inner { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    flex: 1; 
 
} 
 
.child { 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
} 
 
.btn { 
 
    border: 1px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="child">child 1</div> 
 
    <div class="child">child 2</div> 
 
    <div class="child">child 3</div> 
 
    <div class="child">child 4</div> 
 
    <div class="child">child 5</div> 
 
    <div class="child">child 6</div> 
 
    <div class="child">child 7</div> 
 
    </div> 
 
    <div class="btn">My big big big button!</div> 
 
</div>