From e68876e4550afd34ae22b300bdf65b93efd0aefd Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Thu, 27 Aug 2026 15:47:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(media-card):=20=E4=BF=AE=E5=A4=8D=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E5=8D=A1=E7=89=87=E6=96=87=E5=AD=97=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E8=A2=AB=E8=A3=81=E5=88=87=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改了媒体卡片内容的文字样式，移除文本溢出省略和强制不换行设置，改为支持自动换行；新增测试用例验证长文字的换行展示行为。
---
 WonderQ-Admin-UI-Vue/src/pages/MediaPage.test.ts | 14 ++++++++++++++
 WonderQ-Admin-UI-Vue/src/styles.css              | 16 +++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 WonderQ-Admin-UI-Vue/src/pages/MediaPage.test.ts

diff --git a/WonderQ-Admin-UI-Vue/src/pages/MediaPage.test.ts b/WonderQ-Admin-UI-Vue/src/pages/MediaPage.test.ts
new file mode 100644
index 0000000..b77b21d
--- /dev/null
+++ b/WonderQ-Admin-UI-Vue/src/pages/MediaPage.test.ts
@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const styles = readFileSync(new URL("../styles.css", import.meta.url), "utf8");
+
+describe("媒体素材卡片文字", () => {
+  it("长标题和长 URL 应换行展示而不是被裁切", () => {
+    const cardTextRule = styles.match(/\.media-card-content strong,[\s\S]*?\.media-card-content small \{([\s\S]*?)\n\}/)?.[1] ?? "";
+
+    expect(cardTextRule).toContain("overflow-wrap: anywhere;");
+    expect(cardTextRule).toContain("word-break: break-word;");
+    expect(cardTextRule).toContain("white-space: normal;");
+  });
+});
diff --git a/WonderQ-Admin-UI-Vue/src/styles.css b/WonderQ-Admin-UI-Vue/src/styles.css
index f66b987..2c387ae 100644
--- a/WonderQ-Admin-UI-Vue/src/styles.css
+++ b/WonderQ-Admin-UI-Vue/src/styles.css
@@ -425,13 +425,23 @@ input {
   gap: 5px;
   padding: 10px;
 }
+.media-card-content strong,
+.media-card-content span,
+.media-card-content small {
+  display: block;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.media-card-content strong {
+  color: var(--ink);
+  line-height: 1.45;
+}
 .media-card-content span,
 .media-card-content small {
-  overflow: hidden;
   color: var(--muted);
   font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  line-height: 1.45;
 }
 .media-card-content small {
   color: #94a3b8;