diff --git a/packages/frontend/editor-ui/src/views/VariablesView.test.ts b/packages/frontend/editor-ui/src/views/VariablesView.test.ts
index 80a305068a..cf9f104ac4 100644
--- a/packages/frontend/editor-ui/src/views/VariablesView.test.ts
+++ b/packages/frontend/editor-ui/src/views/VariablesView.test.ts
@@ -147,6 +147,23 @@ describe('VariablesView', () => {
 		expect(wrapper.container.querySelectorAll('tr')).toHaveLength(4);
 	});
 
+	it('should truncate long variable values', async () => {
+		userWithPrivileges([
+			{
+				id: '1',
+				key: 'a',
+				value: 'This is a very long variable value that should be truncated',
+			},
+		]);
+
+		const { findByTestId, getByText, queryByText } = renderComponent();
+
+		const table = await findByTestId('resources-table');
+		expect(table).toBeVisible();
+		expect(queryByText('This is a very long variable value that should be truncated')).toBeNull();
+		expect(getByText('This is a very long ...')).toBeVisible();
+	});
+
 	describe('CRUD', () => {
 		it('should create variables', async () => {
 			const { environmentsStore } = userWithPrivileges([
diff --git a/packages/frontend/editor-ui/src/views/VariablesView.vue b/packages/frontend/editor-ui/src/views/VariablesView.vue
index cab6d4923a..68d80ffdac 100644
--- a/packages/frontend/editor-ui/src/views/VariablesView.vue
+++ b/packages/frontend/editor-ui/src/views/VariablesView.vue
@@ -347,7 +347,7 @@ onMounted(() => {
 				</td>
 				<td>
 					<template v-if="data.value">
-						{{ data.value }}
+						<span v-n8n-truncate:20="data.value" />
 					</template>
 					<N8nBadge v-else theme="warning"> Value missing </N8nBadge>
 				</td>