Flex layout, fixed width left and right, adaptive middle

There is no problem with the following, but if the middle is text, ask to display one line, beyond the part… Display?

  .left {
    width:72px;
    min-width:72px;
  }
  .center {
    flex:1;
  }
  .right {
    width:56px;
    min-width:56px;
  }
Copy the code

To improve the writing

  .left {
    width:72px;
    min-width:72px;
  }
  .center {
    overflow:hidden;
  }
  .center_content_ellipsis{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  .right {
    width:56px;
    min-width:56px;
  }
Copy the code
  <div class="container">
    <div class="left"></div>
    <div class="center">
      <div class="center_content">
        <div class="center_content_ellipsis">China Internet Network Information Center (CNNIC) : Led by China, a new programmable optical quantum computing chip has been developed, which can realize fully programmable dynamic simulation of multi-particle quantum walk. In April, the 7nm chip has been trial-produced in China</div>
      </div>
    </div>
    <div class="right"></div>
  </div>
Copy the code