diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index ecfb4a162d..d45679ae07 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -15,7 +15,7 @@
 				</div>
 			</div>
 			<span :class="$style.title" slot="reference">
-				{{value}}
+				<WorkflowNameShort :name="value" :limit="40" />
 				<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" />
 			</span>
 		</el-popover>
@@ -24,8 +24,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import WorkflowNameShort from './WorkflowNameShort.vue';
 
 export default Vue.extend({
+	components: { WorkflowNameShort },
 	name: 'NodeTitle',
 	props: {
 		value: {
diff --git a/packages/editor-ui/src/components/WorkflowNameShort.vue b/packages/editor-ui/src/components/WorkflowNameShort.vue
index eb9b73c063..c03f1b653c 100644
--- a/packages/editor-ui/src/components/WorkflowNameShort.vue
+++ b/packages/editor-ui/src/components/WorkflowNameShort.vue
@@ -1,6 +1,7 @@
 <template>
 	<span :title="name">
-		<slot :shortenedName="shortenedName"></slot>
+		<slot v-if="hasDefaultSlot" :shortenedName="shortenedName"></slot>
+		{{ shortenedName }}
 	</span>
 </template>
 
@@ -14,6 +15,9 @@ export default Vue.extend({
 	name: "WorkflowNameShort",
 	props: ["name", "limit"],
 	computed: {
+		hasDefaultSlot(): boolean {
+			return !!this.$slots.default;
+		},
 		shortenedName(): string {
 			const name = this.$props.name;