Flexbox列布局中嵌套Tooltip元素的文本省略号失效问题

我采用左右两栏布局，左侧占80%宽度，右侧占20%宽度。右侧栏内的列表里，部分文本超出栏宽范围：

• 第一个列表项嵌套了Bootstrap Tooltip组件，text-overflow: ellipsis完全失效，文本直接溢出
• 其余四个未嵌套Tooltip的列表项，通过.list-item类能正常显示省略号

仅修改了第一个列表项来演示问题，试过Stack Overflow上的相关方案但没用，求问问题出在哪以及解决办法。

原代码 #

CSS #

.container {
  display: flex;
  width: 100%;
}

.left {
  width: 80%;
  background-color: lightyellow;
  border: 1px solid black;
}

.right {
  flex-direction: column;
  width: 20%;
  background-color: palegreen;
  border: 1px solid black;
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      margin: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="left">left section content</div>
  <div class="right">
    <div class="list">
      <div class="list-item">
        <div data-bs-toggle="tooltip" title="This is a very big text that is not supposed to fit in the right pane">
          1. This is a very big text that is not supposed to fit in the right pane
        </div>
      </div>
      <div class="list-item">
        2. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        3. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        4. This is a very big text that is not supposed to fit in the right pane
      </div>
      <div class="list-item">
        5. This is a very big text that is not supposed to fit in the right pane
      </div>
    </div>
  </div>
</div>

问题原因 #

核心问题出在嵌套的Tooltip容器（内层<div>）没有宽度约束：

• .list-item的溢出截断规则只对自身的直接子元素生效，但内层的Tooltip容器是块级元素，默认会根据内容宽度撑开，完全忽略父元素.list-item的宽度限制
• 文本直接在无约束的内层容器里显示，自然不会触发.list-item的省略号效果

解决办法 #

给嵌套的Tooltip容器添加宽度约束和截断规则，让它继承父元素的宽度限制，同时把截断逻辑传递到内层文本。修改后的CSS如下：

.container {
  display: flex;
  width: 100%;
}

.left {
  width: 80%;
  background-color: lightyellow;
  border: 1px solid black;
}

.right {
  flex-direction: column;
  width: 20%;
  background-color: palegreen;
  border: 1px solid black;
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      margin: 1px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      /* 给Tooltip容器添加约束 */
      [data-bs-toggle="tooltip"] {
        display: block;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

改动说明 #

1. width: 100%：强制Tooltip容器的宽度和父元素.list-item保持一致，不会超出范围
2. 复用white-space: nowrap、text-overflow: ellipsis、overflow: hidden：让文本在Tooltip容器内部就触发截断，确保省略号正常显示
3. 用属性选择器[data-bs-toggle="tooltip"]精准定位所有Tooltip容器，不用额外加类名，保持代码简洁

内容的提问来源于stack exchange，提问作者Rajaraman Subramanian