flex with text truncate

by Nikhil krishnan

HTML

<header style="display: flex; justify-content:space-between; align-items: center">
  <div class="left-header" style="display: flex; align-items: center"> 
      <span class="img" style="flex-shrink: 0"></span>
      <h1>This is my long long circle names</h1>
  </div>
  <div class="right-header" style="display: flex; align-items: center"> 
      <span class="icon"></span> 
      <span class="icon"></span> 
      <span class="icon"></span> 
      <span class="icon"></span> 
  </div>
</header>

SCSS

header{
  background-color: black;
  height: 60px;
  padding: 10px;
  .img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ccc;
    display: block; 
  }
  .icon{
    width: 32px;
    height: 32px; 
    background-color: #ccc;
    display: block;
    margin-left: 10px;
  }
  .left-header{
    text-overflow: ellipsis;
    overflow: hidden; 
    flex: 1;
    white-space: nowrap ;
  }
  h1{
    color: #fff;
    margin-left: 10px;
    font-size: 20px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap ;
  }
}