要使text-overflow: ellipsis;正常工作，您应该指定inline-block span元素的宽度。
因此，将width: 130px;添加到.table-header__width-ellipses，并将width: 150px;用于.container

工作编码。

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>