UnoCSS 文本溢出显示省略号 rule 配置

快速实现文本溢出显示省略号，简化后续使用

代码实现

uno.config.ts

import { defineConfig, presetUno } from 'unocss';

export default defineConfig({
  presets: [presetUno({})],
  rules: [
    [
      /^text-overflow-(\d+)$/,
      ([_, d]) =>
        d === '1'
          ? { 'white-space': 'nowrap', overflow: 'hidden', 'text-overflow': 'ellipsis' }
          : {
              display: '-webkit-box',
              '-webkit-line-clamp': d,
              'line-clamp': d,
              '-webkit-box-orient': 'vertical',
              'box-orient': 'vertical',
              overflow: 'hidden',
              'text-overflow': 'ellipsis'
            }
    ]
  ]
});

output.css

.text-overflow-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果只需要显示一行使用简化 css

.text-overflow-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行则使用

.text-overflow-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}