帶有溢出和省略號不起作用的嵌套柔性容器

我無法按照需要的方式運行text-overflow: ellipsis和overflow: hidden。帶有溢出和省略號不起作用的嵌套柔性容器

基本上，我需要得到具有item1類和文本左格「請截斷我」縮小爲容器的寬度減小，這樣既item1和item2都在同一行。

無論我嘗試什麼，最終都會出現行溢出並且永不縮水。

從這裏嘗試了各種解決方案，但沒有設法得到我需要的任何工作。

.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