skip to Main Content

The div is having some width and the text inside that is dynamically coming from API and it has styles ellipsis. I can’t provide the width of the text as the text is completely dynamic and not sure about the text length. Below is the code that explains the issue.

body {
    background-color: lightblue;
}

.container {
    display: flex;
    width: 130px;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.table-header__width-ellipses {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
<div class="d-flex">
  <div class="container">
    <div class="d-flex justify-content-between w-100  align-items-center">
      <div class=" d-flex flex-column justify-content-center">
        <div>
        <!-- style="width: 110px" ---- is showing correct ellipsis and text fits in the width -->

          <span class="table-header__width-ellipses pl-2">Long text included here </span>
        </div>
      </div>
      <div class="d-flex">
        <div class="header--sort_icon"></div>
        <div class="cursor-pointer cell-header-addcol">
          <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="d-flex justify-content-between w-100  align-items-center">
      <div class=" d-flex flex-column justify-content-center">
        <div>
          <span class="table-header__width-ellipses pl-2">Long text included here </span>
        </div>
      </div>
      <div class="d-flex">
        <div class="header--sort_icon"></div>
        <div class="cursor-pointer cell-header-addcol">
          <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
        </div>
      </div>
    </div>
  </div>
 <div>

I am trying to generate content like this for the tabular styles. Can someone help me with this?

enter image description here

2

Answers


  1. For the text-overflow: ellipsis; to work, you should specify the width of the inline-block span element.

    So add width: 130px; to .table-header__width-ellipses and use width: 150px; for .container

    Working Code.

    body {
        background-color: lightblue;
    }
    
    .container {
        display: flex;
        width: 150px;
    }
    
    .d-flex {
        display: flex;
    }
    
    .flex-column {
        flex-direction: column;
    }
    
    .justify-content-center {
        justify-content: center;
    }
    
    .justify-content-between {
        justify-content: space-between;
    }
    
    .table-header__width-ellipses {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 130px;
    }
    <div class="d-flex">
      <div class="container">
        <div class="d-flex justify-content-between w-100  align-items-center">
          <div class=" d-flex flex-column justify-content-center">
            <div>
            <!-- style="width: 110px" ---- is showing correct ellipsis and text fits in the width -->
    
              <span class="table-header__width-ellipses pl-2">Long text included here </span>
            </div>
          </div>
          <div class="d-flex">
            <div class="header--sort_icon"></div>
            <div class="cursor-pointer cell-header-addcol">
              <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="d-flex justify-content-between w-100  align-items-center">
          <div class=" d-flex flex-column justify-content-center">
            <div>
              <span class="table-header__width-ellipses pl-2">Long text included here </span>
            </div>
          </div>
          <div class="d-flex">
            <div class="header--sort_icon"></div>
            <div class="cursor-pointer cell-header-addcol">
              <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
            </div>
          </div>
        </div>
      </div>
     <div>
    Login or Signup to reply.
  2. One option is to apply the fixed width to the table-header__width-ellipses class rather than the container and remove the fixed width from the container. In this approach, the container’s width will change depending on how long the text is, and if the text is too long, an ellipsis will be used to break it up.

    body {
        background-color: lightblue;
    }
    
    .container {
        display: flex;
        margin-right: 10px; /* add margin to separate containers */
    }
    
    .d-flex {
        display: flex;
    }
    
    .flex-column {
        flex-direction: column;
    }
    
    .justify-content-center {
        justify-content: center;
    }
    
    .justify-content-between {
        justify-content: space-between;
    }
    
    .table-header__width-ellipses {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 110px; /* set a fixed width to truncate the text with ellipsis */
    }
    <div class="d-flex">
      <div class="container">
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex flex-column justify-content-center">
            <div>
              <span class="table-header__width-ellipses pl-2 bor">Long text included here </span>
            </div>
          </div>
          <div class="d-flex">
            <div class="header--sort_icon"></div>
            <div class="cursor-pointer cell-header-addcol">
              <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex flex-column justify-content-center">
            <div>
              <span class="table-header__width-ellipses pl-2 bor">Long text included here </span>
            </div>
          </div>
          <div class="d-flex">
            <div class="header--sort_icon"></div>
            <div class="cursor-pointer cell-header-addcol">
              <img src="https://cdn.pixabay.com/photo/2022/01/11/21/48/link-6931554_1280.png" alt="menu" width="16" height="16">
            </div>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search