Montre que flex occupe une largeur supérieure à la largeur spécifiée sur le div

Question

Le div a une certaine largeur, le texte qu'il contient provient dynamiquement de l'API et a un style de points de suspension. Je ne peux pas fournir la largeur du texte car le texte est complètement dynamique et la longueur du texte n'est pas déterminée. Vous trouverez ci-dessous le code qui explique le problème.

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>

J'essaie de générer quelque chose comme ça pour un style de table. Quelqu'un peut-il m'aider à résoudre ce problème ?

Answer 1

Pour faire text-overflow: ellipsis; 正常工作，您应该指定 inline-block la largeur de l'élément span.

Alors, utilisez width: 130px; 添加到 .table-header__width-ellipses 并使用 width: 150px; comme .container

Code de travail.

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>