Abschneiden Text funktioniert nicht direkt in Flex-Container

Question

Ich habe eine Javascript-Komponente, die eine gestapelte Liste von Schaltflächen erstellt (eigentlich eine ul> li Struktur). Die Komponente wird in einer Berichtssoftware verwendet, in der der Benutzer die Größe des Containers festlegen kann, in dem sich die Schaltfläche befindet, und über eine beliebige Anzahl von Schaltflächen verfügen kann. Die Schaltflächen müssen dann den vom Benutzer festgelegten Speicherplatz ausfüllen. Text muss vertikal und horizontal zentriert sein. Ich habe flexbox auf der ul verwendet, um das Layout der Tasten zu steuern, und dann wieder auf die li Elemente, um den Text vertikal und horizontal zu zentrieren. Wenn der Text für die Schaltfläche jedoch zu lang ist, wird er abgeschnitten und nicht abgeschnitten.

Ohne Änderung der Markup, ist es möglich, dies mit CSS zu erreichen?

Bearbeiten Eine weitere Voraussetzung ist der Text muss mit Ellipsen (...) nicht wrap abgeschnitten werden. Wenn eine Schaltfläche ein sehr langes Umbruchwort enthält, wird das Problem nicht gelöst. Ich habe den CodePen mit einem solchen Beispiel aktualisiert.

Html:

<div class="reportContainer"> 
    <ul class="segMBtn"> 
    <li class="segMBtn__btn">North</li> 
    <li class="segMBtn__btn">East</li> 
    <li class="segMBtn__btn">South</li> 
    <li class="segMBtn__btn">West</li> 
    <li class="segMBtn__btn">Something else really long that should truncate but doesn't want to truncate even though it should</li> 
    </ul> 
</div> 

LESS/CSS:

.reportContainer { 
    width:400px; 
    height:300px; 
    position:relative; 
    margin:3rem; 
} 

.segMBtn { 
    height:100%; 
    width:100%; 
    position:absolute; 
    display:flex; 
    flex-direction:column; 
    border:solid 1px #ccc; 
} 

.segMBtn__btn { 
    display:flex; 
    border-top:solid 1px #ccc; 
    flex:1 1 auto; 
    text-align:center; 
    justify-content:center; 
    align-items:center; 
    cursor:pointer; 
    padding:0 1rem; 
    box-sizing:border-box; 

    white-space:nowrap; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    width:100%; 

    &:hover { 
    background:#ececec; 
    } 

    &:active { 
    background:#cdcdcd; 
    } 

    &:first-child { 
    border-top:none; 
    } 
} 

Codepen: http://codepen.io/tjkrumm/pen/jAkZVa

Answer 1

In der Klasse .segMBtn__btn entfernen white-space:nowrap;

.reportContainer { 
 
    width:400px; 
 
    height:300px; 
 
    position:relative; 
 
    margin:3rem; 
 
} 
 

 
.segMBtn { 
 
    height:100%; 
 
    width:100%; 
 
    position:absolute; 
 
    display:flex; 
 
    flex-direction:column; 
 
    border:solid 1px #ccc; 
 
} 
 

 
.segMBtn__btn { 
 
    display:flex; 
 
    border-top:solid 1px #ccc; 
 
    flex:1 1 auto; 
 
    text-align:center; 
 
    justify-content:center; 
 
    align-items:center; 
 
    cursor:pointer; 
 
    padding:0 1rem; 
 
    box-sizing:border-box; 
 
    text-overflow:ellipsis; 
 
    overflow:hidden; 
 
    width:100%; 
 

 
    &:hover { 
 
    background:#ececec; 
 
    } 
 
    
 
    &:active { 
 
    background:#cdcdcd; 
 
    } 
 
    
 
    &:first-child { 
 
    border-top:none; 
 
    } 
 
}

<div class="reportContainer"> 
 
    <ul class="segMBtn"> 
 
    <li class="segMBtn__btn">North</li> 
 
    <li class="segMBtn__btn">East</li> 
 
    <li class="segMBtn__btn">South</li> 
 
    <li class="segMBtn__btn">West</li> 
 
    <li class="segMBtn__btn">Something else really long that should truncate but doesn't want to truncate even though it should</li> 
 
    </ul> 
 
</div>