如何让文本超出div容器时自动截断且不设置固定宽度？

核心是通过Flex布局的flex属性让子容器自动分配宽度，同时给文本设置截断样式，无需固定px值：

完整代码示例 #

HTML

<div class="flex-container">
  <div class="item">
    <p class="truncate-text">这里是一段很长很长的测试文本，用来验证是否会在容器宽度内自动截断，且不会改变容器的尺寸</p>
  </div>
  <div class="item">
    <!-- 右侧容器内容 -->
  </div>
</div>

CSS

.flex-container {
  display: flex;
}

.item {
  flex: 1; /* 两个子容器平分外层Flex容器的宽度，实现尺寸一致 */
  border: 1px solid #eee; /* 可选：添加边框便于观察布局 */
  padding: 8px;
  margin: 0 4px;
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号，提升体验 */
  margin: 0; /* 清除段落默认边距，避免干扰布局 */
}

关键说明 #

• flex: 1 使两个子容器自动均分外层容器的可用宽度，无需手动设置固定宽度，确保二者尺寸始终相同。
• white-space: nowrap 禁止文本换行，overflow: hidden 隐藏超出容器的内容，搭配text-overflow: ellipsis可在截断处显示省略号（若不需要省略号，可移除该属性）。
• 整个布局会自适应外层容器的宽度，文本始终基于子容器的自动宽度截断，不会导致容器尺寸变化。

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