flex布局min-width:0实现打点效果实例页面

展示

代码

• HTML：

  <h4>打点无效示意</h4>
  <div class="container">
      <item>宽度不确定项</item>
      <item>
          <p class="ellipsis">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
      </item>
  </div>
  <h4>min-width:0实现示意</h4>
  <div class="container">
      <item>宽度不确定项</item>
      <item>
          <p class="ellipsis">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
      </item>
  </div>
  <h4>overflow:hidden实现示意</h4>
  <div class="container">
      <item>宽度不确定项</item>
      <item>
          <p class="ellipsis">文字内容文字内容文字内容文字内容文字内容文字内容文字内容</p>
      </item>
  </div>

• CSS：

  .container {
      display: flex;
  }
  .ellipsis {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
  
  .container:nth-of-type(2) item {
      min-width: 0;
  }
  .container:nth-of-type(3) item {
      overflow: hidden;
  }