省略號不與Flex容器一起使用

我有兩個彈性容器，在一個容器內，我使用省略號<p>標記，但它不起作用。省略號不與Flex容器一起使用

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>

來源

2017-02-21 parveen-kaushik

將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>

來源

2017-02-21 10:17:36

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>

}

來源

2017-02-21 10:16:53 Lucian

通過一個寬度爲.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>

來源

2017-02-21 10:20:08 AymDev

省略號不與Flex容器一起使用

回答

相關問題