diff --git a/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue b/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
index 90c8b98..7b6616b 100644
--- a/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
+++ b/my-vue-app/src/views/person/components/SalesTimelineWithTaskList.vue
@@ -336,7 +336,7 @@
             <div class="recording-item" v-for="recording in filteredRecordings" :key="recording.id">
               <div class="recording-info">
                 <div class="recording-header">
-                  <span class="recording-name">{{ recording.name }}</span>
+                  <span class="recording-name" :title="recording.name">{{ recording.name }}</span>
                   <span class="recording-score">分数: {{ recording.score }}</span>
                 </div>
                 <span class="recording-time">{{ recording.time }}</span>
@@ -877,7 +877,14 @@ $indigo: #4f46e5;
 .recording-item { display: flex; flex-direction: column; justify-content: space-between; padding: 12px 16px; background-color: $slate-50; border-radius: 8px; transition: all 0.2s ease; &:hover { background-color: $slate-100; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } }
 .recording-info { display: flex; flex-direction: column; gap: 4px; flex: 1; }
 .recording-header { display: flex; justify-content: space-between; align-items: center; }
-.recording-name { font-weight: 500; color: $slate-800; }
+.recording-name { 
+  font-weight: 500; 
+  color: $slate-800; 
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 80px);
+}
 .recording-time { font-size: 0.8rem; color: $slate-600; }
 .recording-type { font-size: 0.75rem; color: $slate-500; background-color: $slate-200; padding: 2px 8px; border-radius: 12px; display: inline-block; width: fit-content; }
 .recording-score { font-size: 0.8rem; color: $warning; font-weight: 600; }