如何实现CSS单行文本溢出显示省略号且不出现横向滚动条

问题原因 #

你给文本元素设置 white-space: nowrap 后，单行文本的实际渲染宽度会超出父容器限制，你给 .myText 加的 overflow: hidden 只能限制元素自身内容不溢出，但没有阻止元素本身被文本撑宽，进而撑破上层模态框容器触发滚动条。

解决方案 #

按顺序调整以下样式即可：

• 给模态框外层容器设置明确的宽度限制+禁用横向溢出
  根据你实际使用的模态框类名修改对应选择器：

/* 示例为模态框最外层容器 */
.modal-wrap {
  width: 600px; /* 可根据需求调整，也可以用max-width: 90vw适配移动端 */
  max-width: 90vw;
  overflow-x: hidden;
}

• 修正 .myText 样式，补全缺失的规则

.myText {
  padding-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 新增规则 */
  box-sizing: border-box; /* 让内边距算在100%宽度内，不会额外撑宽元素 */
  width: 100%;
  min-width: 0; /* 如果.myText的父元素是flex布局项，必须加这行取消flex默认的内容自适应宽度规则 */
}

• 极端情况兜底方案
  如果调整后还是出现滚动条，直接给模态框最外层容器强制禁用横向滚动：

.modal-wrap {
  overflow-x: hidden !important;
}

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