顯示 flex 佔用的寬度大於 div 上指定的寬度

Question

div 有一定的寬度，裡面的文字動態地來自 API，並且有省略號樣式。我無法提供文字的寬度，因為文字是完全動態的並且不確定文字長度。下面是解釋該問題的程式碼。

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>

我正在嘗試為表格樣式產生這樣的內容。有人可以幫我解決這個問題嗎？

Answer 1

要讓 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>