本文讨论的是超出宽度文字截断并且不在末尾显示省略号，而非多行文本末尾添加省略号。

在前端开发中，我们经常需要处理文本内容超出容器的情况。今天我们将介绍两种纯 CSS 实现文本截断的方法：一种是使用 ch 单位设置最大字符宽度，另一种是通过设置元素高度只展示一行文字，同时使用两行省略号来隐藏超出部分。这两种方法我们都将以 SCSS 的 @mixin 形式提供。

方法一：使用 ch 单位设置最大字符宽度

优点

  • 简单易用，适合等宽字体。
  • 控制字符数量，确保截断精确。

缺点

  • 仅适用于等宽字体，对于非等宽字体效果不佳。
  • 无法控制多行文本截断。

SCSS @mixin

@mixin truncate-ch($width-ch) {
  width: $width-ch; /* 设置最大字符宽度 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号 */
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Truncation with ch Unit</title>
  <style>
    .truncate-ch {
      @include truncate-ch(20); /* 使用mixin */
    }
  </style>
</head>
<body>
  <div class="truncate-ch">
    这是一个超出内容的示例文本。这是一个超出内容的示例文本。这是一个超出内容的示例文本。
  </div>
</body>
</html>

解释

  • @mixin truncate-ch($width-ch): 定义一个 SCSS @mixin，接收一个参数 $width-ch，用于设置最大字符宽度。
  • @include truncate-ch(20);: 使用 @mixin，将最大字符宽度设置为 20 个字符宽度。

方法二：两行省略号显示，但只展示一行文字

优点

  • 适用于任意字体和多行文本。
  • 更灵活的布局控制。

缺点

  • 实现稍复杂，需要使用特定的 CSS 属性。
  • 兼容性可能有问题，部分旧版浏览器不支持。

SCSS @mixin

@mixin truncate-multiline($lines: 1, $line-height) {
  max-height: $line-height * $lines;
  @include line($lines + 1)
}

@mixin line($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $lines;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Multi-line Truncation</title>
  <style>
    .truncate {
      @include truncate-multiline(1, 1.2em); /* 使用mixin */
    }
  </style>
</head>
<body>
  <div class="truncate">
    这是一个超出内容的示例文本。这是一个超出内容的示例文本。这是一个超出内容的示例文本。这是一个超出内容的示例文本。这是一个超出内容的示例文本。
  </div>
</body>
</html>

解释

  • @mixin truncate-multiline($lines, $line-height): 定义一个 SCSS @mixin，接收两个参数 $lines 和 $line-height，用于设置显示的行数和行高。
  • @include truncate-multiline(1, 1.2em);: 使用 @mixin，将显示行数设置为 1 行，行高设置为 1.2em。

总结

这两种方法分别适用于不同的场景：使用 ch 单位适合等宽字体的文本截断，而两行省略号显示但只展示一行文字的方法适用于需要更灵活控制文本显示的场景。通过将这些方法整理成 SCSS 的 @mixin，可以更方便地在项目中复用。希望这篇文章能帮助你更好地处理文本截断问题。如果你有更好的方法或建议，欢迎在评论区分享！

希望这篇文章对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时告诉我。