Эллипс не работает с контейнером Flex

Question

У меня есть два гибких контейнера, внутри одного контейнера я использую многоточие для метки <p>, но его не работает.

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    width:50%; 
 
} 
 

 
ul li { 
 
    display: flex; 
 
    padding: 16px; 
 
    border-bottom: solid 1px; 
 
    flex-flow: row wrap; 
 
    background: #C5CAE9; 
 
} 
 

 
.inner-container p { 
 
     white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    min-width: 0; 
 
} 
 

 
.inner-container { 
 
    display: flex; 
 
    line-height: 30px; 
 
} 
 

 
.inner-container div { 
 
    padding-right: 20px; 
 
}

<ul> 
 
    <li> 
 
    <div>Icon 01</div> 
 
    <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
    <div>Icon 02</div> 
 
    </li> 
 
    <li> 
 
    <div>Icon 01</div> 
 
    <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
    <div>Icon 02</div> 
 
    
 
    <div class="inner-container"> 
 
    <div>01</div> 
 
    
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
    </p> 
 
    
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

min-width:0 до .inner-container, а не .inner-container p.

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    width: 50%; 
 
} 
 

 
ul li { 
 
    display: flex; 
 
    padding: 16px; 
 
    border-bottom: solid 1px; 
 
    flex-flow: row wrap; 
 
    background: #C5CAE9; 
 
} 
 

 
.inner-container p { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.inner-container { 
 
    display: flex; 
 
    line-height: 30px; 
 
    min-width: 0 
 
} 
 

 
.inner-container div { 
 
    padding-right: 20px; 
 
}

<ul> 
 
    <li> 
 
    <div>Icon 01</div> 
 
    <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
    <div>Icon 02</div> 
 
    </li> 
 
    <li> 
 
    <div>Icon 01</div> 
 
    <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
    <div>Icon 02</div> 
 

 
    <div class="inner-container"> 
 
     <div>01</div> 
 

 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     </p> 
 

 
    </div> 
 
    </li> 
 
</ul>

Answer 2

overflow:hidden должны быть в материнской так:

.inner-container { 
    display: flex; 
    line-height: 30px; 
    overflow: hidden; 

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    width:50%; 
 
} 
 

 
ul li { 
 
    display: flex; 
 
    padding: 16px; 
 
    border-bottom: solid 1px; 
 
    flex-flow: row wrap; 
 
    background: #C5CAE9; 
 
} 
 

 
.inner-container p { 
 
     white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    min-width: 0; 
 
} 
 

 
.inner-container { 
 
    display: flex; 
 
    line-height: 30px; 
 
    overflow: hidden; 
 
} 
 

 
.inner-container div { 
 
    padding-right: 20px; 
 
}

<ul> 
 
    <li> 
 
    <div>Icon 01</div> 
 
    <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
    <div>Icon 02</div> 
 
    </li> 
 
    <li> 
 
    <div>Icon 01</div> 
 
    <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
    <div>Icon 02</div> 
 
    
 
    <div class="inner-container"> 
 
    <div>01</div> 
 
    
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
    </p> 
 
    
 
    </div> 
 
    </li> 
 
</ul>

}

Answer 3

решаемые его, установив ширину .inner-container. Если вы не установите его, он не знает, где остановиться и отобразить весь текст.

ul { 
 
     margin: 0; 
 
     padding: 0; 
 
     list-style: none; 
 
     width:50%; 
 
    } 
 

 
    ul li { 
 
     display: flex; 
 
     padding: 16px; 
 
     border-bottom: solid 1px; 
 
     flex-flow: row wrap; 
 
     background: #C5CAE9; 
 
    } 
 

 
    .inner-container p { 
 
      white-space: nowrap; 
 
     overflow: hidden; 
 
     text-overflow: ellipsis; 
 
    } 
 

 
    .inner-container { 
 
     display: flex; 
 
     line-height: 30px; 
 
     width: 50%; 
 
    } 
 

 
    .inner-container div { 
 
     padding-right: 20px; 
 
    }

<ul> 
 
     <li> 
 
     <div>Icon 01</div> 
 
     <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
     <div>Icon 02</div> 
 
     </li> 
 
     <li> 
 
     <div>Icon 01</div> 
 
     <div>Heading Heading Heading Heading Heading Heading Heading</div> 
 
     <div>Icon 02</div> 
 
     
 
     <div class="inner-container"> 
 
      <div>01</div> 
 
     
 
      <p> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
      </p> 
 
     
 
     </div> 
 
     </li> 
 
    </ul>