フレックスコンテナ内でテキストの切り詰めが直接行われない

Question

私はボタンの積み重なったリストを作成するjavascript UIコンポーネントを持っています（実際にはul> li構造体）。このコンポーネントは、レポートソフトウェアで使用されます。レポートソフトウェアでは、ボタンが置かれているコンテナのサイズを設定でき、任意の数のボタンを持つことができます。ボタンは、ユーザーが設定したスペースを埋める必要があります。テキストは縦と横の中央に配置する必要があります。私はulのフレックスボックスを使用してボタンのレイアウトを制御してから、の要素を再び縦横にセンタリングしました。ただし、テキストがボタンには長すぎる場合は、クリップして切り捨てません。

マークアップを変更せずに、CSSでこれを達成することは可能ですか？

編集 さらに、テキストを省略記号（...）で囲む必要があります。ボタンに1つの非常に長い単語が含まれている場合、折り返しは問題を解決しません。私はそのような例でcodepenを更新しました。

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

が削除.segMBtn__btn 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>