css如何让文本不换行

在网页布局中，文本默认会根据容器宽度自动换行，但部分场景下需要让文本始终显示在一行，比如顶部导航的菜单文字、卡片标题、表格单元格内容等。要实现这个效果，需要结合多个css属性共同完成。

核心实现属性

white-space属性

white-space属性用来设置如何处理元素内的空白字符和换行行为，要实现文本不换行，核心是使用nowrap值。该值会合并连续的空白字符，同时强制文本在一行内显示，不会自动换行。

常用取值对比：

overflow属性

当文本长度超过容器宽度时，仅设置white-space: nowrap会导致文本溢出容器。此时需要搭配overflow属性控制溢出内容的显示方式，常用取值为hidden，表示隐藏溢出容器的内容。

text-overflow属性

如果需要在文本溢出时显示省略号，还需要添加text-overflow: ellipsis属性，该属性只有在overflow不为visible且white-space为nowrap时才会生效。

完整代码示例

基础不换行实现

仅让文本不换行，溢出内容直接显示：

/* 容器样式 */
.text-nowrap {
  width: 200px;
  border: 1px solid #ccc;
  /* 核心：强制文本不换行 */
  white-space: nowrap;
}

<div class="text-nowrap">
  这是一段很长的文本内容，设置了不换行属性之后会始终显示在一行
</div>

溢出显示省略号实现

文本超出容器宽度时显示省略号：

.text-ellipsis {
  width: 200px;
  border: 1px solid #ccc;
  /* 强制文本不换行 */
  white-space: nowrap;
  /* 隐藏溢出内容 */
  overflow: hidden;
  /* 溢出显示省略号 */
  text-overflow: ellipsis;
}

<div class="text-ellipsis">
  这是一段很长的文本内容，超出容器宽度后会显示省略号
</div>

注意事项

• text-overflow: ellipsis仅对单行文本生效，多行文本省略需要其他方案实现
• 如果容器是弹性布局的子元素，可能需要设置min-width: 0或者overflow: hidden才能让省略号正常生效
• 部分旧版本浏览器对text-overflow属性的支持存在差异，使用前可以确认目标浏览器的兼容性

常见问题解答

设置了nowrap还是换行怎么办

检查容器是否有固定宽度，如果容器宽度是自适应内容，文本会撑开容器导致看起来还是换行。可以给容器设置明确的宽度，或者设置display: inline-block限制容器宽度。

如何让不换行文本可以横向滚动

可以将overflow属性设置为auto或者scroll，这样文本溢出时会显示横向滚动条：

.text-scroll {
  width: 200px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

csswhite_space文本不换行overflowtext_overflow修改时间：2026-06-26 03:45:24