如何仅在容器达到特定最小宽度时截断文本？

可以仅通过CSS实现这个需求，核心思路是利用媒体查询或容器查询，根据容器的宽度阈值切换文本的显示状态：

实现方案1：基于视口宽度的媒体查询 #

适合容器宽度随视口变化的响应式布局场景：

.container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* 当视口宽度 ≥ 120px 时，显示文本截断效果 */
@media (min-width: 120px) {
  .container {
    text-overflow: ellipsis;
  }
}

/* 当视口宽度 < 120px 时，隐藏文本 */
@media (max-width: 119px) {
  .container {
    color: transparent;
    /* 也可根据需求使用 visibility: hidden; 或 display: none; */
  }
}

<div class="container">
  This is some text that will truncate or hide based on width
</div>

实现方案2：基于容器自身宽度的容器查询 #

如果需要精准针对容器自身宽度（而非视口），可以使用容器查询（现代主流浏览器已支持）：

.container {
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* 容器宽度 ≥ 120px 时，应用文本截断 */
@container (min-width: 120px) {
  .container {
    text-overflow: ellipsis;
  }
}

/* 容器宽度 < 120px 时，隐藏文本 */
@container (max-width: 119px) {
  .container {
    color: transparent;
  }
}

两种方案都能满足需求：当容器宽度达到设定的最小阈值时，文本自动截断显示省略号；宽度小于阈值时，文本直接隐藏。你可以根据实际布局场景选择合适的方式，同时调整阈值宽度和隐藏方式匹配需求。

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