text-overflow属性失效求助：如何实现容器内文本单行截断

我太懂这种明明写对了属性却没效果的抓狂感了！咱们来拆解一下为什么你的单行截断没生效，以及怎么修复它。

首先要明确：text-overflow: ellipsis 生效是有3个严格前提的，缺一不可，咱们逐个核对：

• 元素必须是「块级」或「行内块级」元素：默认的行内元素（比如<a>、<span>）宽度由内容撑开，没法触发截断。给目标元素加上 display: block; 或者 display: inline-block; 就行。
• 必须有明确的宽度约束：你用了 width: 35%，但这个百分比是相对于父容器的——如果父容器没有确定宽度，35%就没有参考基准，元素还是会被内容撑开。要确保父容器有明确宽度（比如 width: 100% 或者固定像素值）。
• 没有其他样式干扰：检查是否有 word-wrap: break-word、浮动、绝对定位这类属性打乱了盒模型，或者其他CSS覆盖了你的截断样式。用浏览器F12开发者工具查看「计算样式」就能快速排查。

给你一套可直接复用的代码示例 #

针对标题（块级元素场景） #

.header {
  display: block;
  width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 若父容器是flex布局，添加这句防止被挤压：flex-shrink: 0; */
}

针对命名链接（行内块场景） #

.named-link {
  display: inline-block;
  width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果主容器是Flex布局 #

如果内容放在flex容器里，调整写法确保宽度被正确约束：

.main-container {
  display: flex;
  width: 100%; /* 给父容器明确宽度 */
}

.truncated-text {
  flex: 0 0 35%; /* 固定占比，不放大不缩小 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

最后小提示：用开发者工具查看元素的盒模型，确认「内容宽度」确实超过了你设置的35%，不然截断效果是看不出来的哦！

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