Does HTML's display flex take more width than assigned width on a div?

mcuser
May 9, 2023
108 views
0 votes
2 Answers

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?

Tags: css html

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Does HTML’s display flex take more width than assigned width on a div?

Answers