オーバーフローして省略記号が機能しないネストされたフレックスコンテナ

text-overflow: ellipsisとoverflow: hiddenが必要な方法で動作するのに問題があります。オーバーフローして省略記号が機能しないネストされたフレックスコンテナ

基本的に、私はクラスitem1とテキスト「私を切り捨ててください」の両方item1とitem2が同じ行にあるように、コンテナの減少の幅が縮小すると、左のdivを取得する必要があります。

私が何を試しても、私は行があふれてしまいます。それは決して縮小しません。

ここからさまざまなソリューションを試しましたが、必要な方法で作業することはできませんでした。

.mainwrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
    max-height: 100%; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    max-width: 800px; 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: red; 
 
} 
 

 
.top-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 80%; 
 
    height: 80%; 
 
    background-color: cyan; 
 
} 
 

 
.title { 
 
    background-color: white; 
 
} 
 

 
.table-container { 
 
    display: table; 
 
} 
 

 
.skills-container { 
 
    width: 100%; 
 
    display: block; 
 
    background-color: green; 
 
} 
 

 
.skill-row { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: start; 
 
    background-color: blue; 
 
} 
 

 
.item1 { 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.item2 { 
 
    flex-shrink: 0; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.item-content { 
 
    display: flex; 
 
} 
 

 
.item-details { 
 
    display: flex; 
 
} 
 

 
.text1 { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    background-color: yellow; 
 
} 
 

 
.small-button { 
 
    display: flex; 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: green; 
 
} 
 

 
.overflow-toverflow { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.flex-w { 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex-nw { 
 
    flex-wrap: nowrap; 
 
} 
 

 
.flex-min { 
 
    flex: 1 1 auto; 
 
    min-width: 0; 
 
} 
 

 
.flex-sh-0 { 
 
    flex-shrink: 0; 
 
} 
 

 
.min0 { 
 
    min-width: 0; 
 
}

<div class="mainwrapper"> 
 
    <div class="content flex-min"> 
 
    <div class="top-container flex-min"> 
 
     <div class="title">Your skills</div> 
 
     <div class="table-container"> 
 
     <div class="skills-container"> 
 
      <div class="skill-row flex-nw flex-min"> 
 
      <div class="item1 flex-min"> 
 
       <div class="item-content"> 
 
       <div class="small-button"></div> 
 
       <div class="text1 overflow-toverflow">Please truncate me! Please truncate me!Please truncate me!Please truncate me!Please truncate me!Please truncate me</div> 
 
       </div> 
 
      </div> 
 
      <div class="item2 flex-sh-0"> 
 
       <div class="small-button"></div> 
 
       <div class="text1">Relevance: None Whatsoever None</div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

codepen： https://codepen.io/Tiartyos/pen/Ljxyqr

出典

2017-08-06 Tiartyos