unocss实现一个多行文本rules

先看下如何使用

rows-{num}

<div class="rows-9">
    这里是内容
</div>

输出的css

.rows-9 {
  -webkit-line-clamp: 9;
  word-break: break-all;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;

}

如图：

unocss配置

{
    ...
    rules: [
        ...
        [
          /^rows-(\d+)$/,
          ([, rows]) => ({
            "-webkit-line-clamp": rows,
            "word-break": "break-all",
            "-webkit-box-orient": "vertical",
            overflow: "hidden",
            display: "-webkit-box",
          }),
        ],
        ...
    ],
    ...
}