CSS 的换行和省略号不是同一个开关。先确定内容允许怎样显示，再给容器一个明确的可用宽度。

不换行和长词折行

.no-wrap {
  white-space: nowrap;
}

.wrap-long-text {
  overflow-wrap: break-word;
}

.break-any-character {
  word-break: break-all;
}

white-space 控制空白与换行；overflow-wrap 允许过长词在需要时拆开；word-break:break-all 更激进，可能在普通英文词内部断行，通常不适合直接套在所有正文上。旧名 word-wrap 常作为 overflow-wrap 的兼容别名出现。

是否换行还与盒子的可用宽度和布局有关，不能概括为“先把所有行内元素改成块级就一定生效”。

单行超出显示省略号

<p class="single-line">这是一段可能超过容器宽度的完整文本。</p>
.single-line {
  display: block;
  width: 16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

text-overflow 指定如何提示被隐藏的行内方向溢出，它本身不会制造溢出，也不负责提供容器宽度。MDN text-overflow

这套写法只演示单行，不等于多行截断。内容本来就放得下时，也不会出现省略号。

在 flex 或 grid 里还要允许收缩

如果文本所在项目因最小尺寸限制而撑开父级，可以检查对应项目是否需要 min-width:0，并确认父级确实有宽度约束。不要只在最内层加 ellipsis，却忽略外层始终被内容撑开。

界面可以省略显示，但不要把业务数据本身截断成带省略号的字符串。重要内容应提供展开或其他完整阅读入口；测试时同时考虑中文、长 URL、英文长词、窄屏和缩放。