使用CSS实现文本的不换行省略在 CSS 中，可以通过 text-overflow 属性结合其他样式来实现文本的不换行省

在 CSS 中，可以通过 text-overflow 属性结合其他样式来实现文本的不换行省略。以下是一个完整的示例，展示如何给一个 div 设置不换行省略效果：

示例代码

HTML复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Overflow Example</title>
  <style>
    .ellipsis {
      /* 设置宽度，防止内容无限扩展 */
      width: 200px;

      /* 设置为单行显示 */
      white-space: nowrap;

      /* 设置溢出部分的显示方式为省略号 */
      text-overflow: ellipsis;

      /* 设置溢出部分的溢出方式 */
      overflow: hidden;

      /* 设置文本对齐方式 */
      text-align: left;

      /* 设置边框，方便观察效果 */
      border: 1px solid #ccc;

      /* 设置内边距 */
      padding: 8px;
    }
  </style>
</head>
<body>
  <div class="ellipsis">
    这是一段很长的文本，当内容超出容器宽度时，会显示省略号而不是换行。
  </div>
</body>
</html>

关键 CSS 属性解释

width：
- 设置容器的宽度，防止内容无限扩展。
white-space: nowrap：
- 确保内容不会换行，保持在一行显示。
text-overflow: ellipsis：
- 当内容超出容器宽度时，显示省略号（...）。
overflow: hidden：
- 隐藏超出容器部分的内容。
text-align：
- 设置文本的对齐方式，如 left、center 或 right。
padding 和 border：
- 可选样式，用于美化容器。

效果

当文本内容超出 div 的宽度时，超出部分会被隐藏，并在末尾显示省略号。
文本不会换行，始终保持在一行显示。

注意事项

如果需要支持多行省略（多行文本溢出时显示省略号），可以使用 line-clamp 属性，但需要结合 display: -webkit-box 和 -webkit-line-clamp，并且目前只支持部分浏览器（如 Chrome 和 Safari）。

多行省略示例

css复制

.ellipsis-multi {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 设置显示的行数 */
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 8px;
}

希望这些内容对你有帮助！