Text-Überlauf: Ellipse und Flex

Question

Ich habe ein Containerelement mit display: flex Eigenschaft festgelegt. A Kinder haben feste Breite (flex: 0 0 auto), eine andere keine (flex: 1). Die flexiblen Kinder haben noch andere Kinder: Ich möchte, dass dieser Container (inner) seine Kinder entsprechend der Elternbreite abschneidet.

Ich habe es geschafft, aber ich würde auch gerne die Ellipse Überlauf für den Fall, dass der Inhalt abgeschnitten (die Anzahl der Kinder ist nicht behoben).

Dies ist mein Code so weit:

.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; 
} 

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

Wie kann ich die folgende gewünschte Ergebnis? (Hacks erlaubt - CSS nur bitte!)

Answer 1

Es gibt ein paar Probleme mit Ihrem Layout:

1. text-overflow: ellipsis funktioniert nur mit display: block und display: inline-block Containern. Es schlägt fehl, weil Sie .inner auf display: flex festgelegt haben.

2. text-overflow: ellipsis muss white-space: nowrap in derselben Deklaration enthalten. Es fehlt in Ihrer .inner Regel.

3. Auslassungs funktioniert auf Text, keine Block-Level-Elemente

Try this:

* { 
 
    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>

Mehr über text-overflow: ellipsis hier: Applying an ellipsis to multiline text

Answer 2

Hier JS Ansatz ist, wo Sie die child div Position haben, die überläuft mit Position Taste, und blenden Sie alle divs nach diesem div und hängen ... danach finden konnten, 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>