省略号无法使用Flex容器

Question

我有两个flex容器，在一个容器中我使用<p>标签的省略号，但它不起作用。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将min-width:0设为.inner-container而不是.inner-container p。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过将宽度设置为.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>

Answer 3

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>

}