diff --git a/packages/neos-ui-views/src/NodeInfoView/index.js b/packages/neos-ui-views/src/NodeInfoView/index.js
index b2cb208efb..98a17d5dd6 100644
--- a/packages/neos-ui-views/src/NodeInfoView/index.js
+++ b/packages/neos-ui-views/src/NodeInfoView/index.js
@@ -36,6 +36,8 @@ export default class NodeInfoView extends PureComponent {
         };
 
         const nodeType = $get('nodeType', node);
+        // Insert soft hyphens after dots and colon to make the node type more readable
+        const hyphenatedNodeTypeName = nodeType.replace(/([.:])/g, '$1\u00AD');
 
         return (
             <ul className={style.nodeInfoView}>
@@ -61,7 +63,7 @@ export default class NodeInfoView extends PureComponent {
                 </li>
                 <li className={style.nodeInfoView__item} title={nodeType}>
                     <div className={style.nodeInfoView__title}>{i18nRegistry.translate('type', 'Type', {}, 'Neos.Neos')}</div>
-                    <NodeInfoViewContent>{nodeType}</NodeInfoViewContent>
+                    <NodeInfoViewContent>{hyphenatedNodeTypeName}</NodeInfoViewContent>
                 </li>
             </ul>
         );
diff --git a/packages/neos-ui-views/src/NodeInfoView/style.module.css b/packages/neos-ui-views/src/NodeInfoView/style.module.css
index b7181df20f..a331e47e88 100644
--- a/packages/neos-ui-views/src/NodeInfoView/style.module.css
+++ b/packages/neos-ui-views/src/NodeInfoView/style.module.css
@@ -30,4 +30,6 @@
 .nodeInfoView__content {
     font-size: 13px;
     color: var(--colors-ContrastBright);
+    hyphenate-character: '';
+    word-wrap: break-word;
 }