cl-text 支持多行省略号

pages/demo/basic/text.uvue

@@ -19,6 +19,22 @@
 				>
 			</demo-item>
 
+			<demo-item :label="t('省略号')">
+				<cl-text ellipsis
+					>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。</cl-text
+				>
+			</demo-item>
+
+			<demo-item :label="t('多行省略号')">
+				<cl-text ellipsis :lines="2"
+					>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。天阶夜色凉如水，卧看牵牛织女星。人生若只如初见，何事秋风悲画扇。山有木兮木有枝，心悦君兮君不知。</cl-text
+				>
+			</demo-item>
+
+			<demo-item :label="t('金额')">
+				<cl-text type="amount" :value="10000000.0"></cl-text>
+			</demo-item>
+
 			<demo-item :label="t('手机号脱敏')">
 				<cl-text type="phone" mask value="13800138000"></cl-text>
 			</demo-item>
@@ -35,19 +51,9 @@
 				<cl-text type="card" mask value="1234 5678 9012 3456"></cl-text>
 			</demo-item>
 
-			<demo-item :label="t('金额')">
-				<cl-text type="amount" :value="100.0"></cl-text>
-			</demo-item>
-
 			<demo-item :label="t('自定义脱敏字符')">
 				<cl-text type="phone" value="13800138000" mask mask-char="~"></cl-text>
 			</demo-item>
-
-			<demo-item :label="t('省略号')">
-				<cl-text ellipsis
-					>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。</cl-text
-				>
-			</demo-item>
 		</view>
 	</cl-page>
 </template>

uni_modules/cool-ui/components/cl-text/cl-text.uvue

@@ -114,6 +114,11 @@ const props = defineProps({
 		type: Boolean,
 		default: false
 	},
+	// 最大行数
+	lines: {
+		type: Number,
+		default: 1
+	},
 	// 是否可选择
 	selectable: {
 		type: Boolean,
@@ -185,7 +190,9 @@ const isDefaultSize = computed(() => !hasTextSize(pt.value.className ?? ""));
 
 // 文本样式
 const textStyle = computed(() => {
-	const style = {};
+	const style = {
+		lines: props.lines
+	};
 
 	// 判断是不是有颜色样式
 	if (!hasTextColor(ptClassName.value)) {
@@ -320,7 +327,16 @@ const content = computed(() => {
 	}
 
 	&--ellipsis {
-		@apply truncate w-full;
+		text-overflow: ellipsis;
+
+		// #ifndef APP
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-line-clamp: v-bind(lines);
+		line-break: anywhere;
+		-webkit-box-orient: vertical;
+		// #endif
 	}
 
 	&--default-size {