diff --git a/package.json b/package.json
index e27ca74..7f6b50e 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "antd-design-token",
   "displayName": "antd Design Token",
   "description": "VSCode extension for antd v5 design token.",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "publisher": "shezhangzhang",
   "engines": {
     "vscode": "^1.68.0"
@@ -59,7 +59,7 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "antd-token-previewer": "^1.0.0-alpha.22",
+    "antd-token-previewer": "^1.0.3",
     "rgb-hex": "^4.0.0"
   },
   "repository": {
diff --git a/src/decoration-manager.ts b/src/decoration-manager.ts
index e55cb14..bd00293 100644
--- a/src/decoration-manager.ts
+++ b/src/decoration-manager.ts
@@ -207,9 +207,14 @@ export default class DecorationManager {
     valueDecorations.push(decoration);
 
     const themeFocusBorderColor = new vscode.ThemeColor("focusBorder");
+    const stringValue = String(this.fullToken[key]);
     const decorationType = vscode.window.createTextEditorDecorationType({
       after: {
-        contentText: colorValue ? "--" : `${String(this.fullToken[key])}`,
+        contentText: colorValue
+          ? "--"
+          : stringValue.length > 36
+          ? `${stringValue.slice(0, 36)}...`
+          : stringValue,
         color: colorValue ? "transparent" : "#b37feb",
         backgroundColor: colorValue || "",
         border: "2px solid",