diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.css b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.css
index 65ef475088..e852011d55 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.css
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.css
@@ -20,3 +20,16 @@
 .material-icons {
     cursor: pointer;
 }
+
+.list-wrap {
+    word-wrap: break-word;
+    word-break: break-all;
+    -moz-hyphens:auto;
+    -webkit-hyphens:auto;
+    -o-hyphens:auto;
+    hyphens:auto;
+}
+
+.hide-long-names {
+    overflow: auto;
+}
\ No newline at end of file
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.html
index f1760200c3..17e5ae6681 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-comments.component.html
@@ -7,8 +7,8 @@
 
 <div class="menu-container" *ngIf="comments?.length > 0">
     <ul class='mdl-list'>
-        <li class="mdl-list__item" *ngFor="let comment of comments">
-            <span class="mdl-list__item-primary-content">
+        <li class="mdl-list__item list-wrap" *ngFor="let comment of comments">
+            <span class="mdl-list__item-primary-content hide-long-names">
             <i class="material-icons mdl-list__item-icon">comment</i>
             {{comment.message}}
             </span>
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.css
index 00d4c682f8..9ca19c95cd 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.css
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.css
@@ -17,3 +17,16 @@
 .material-icons {
     cursor: pointer;
 }
+
+.list-wrap {
+    word-wrap: break-word;
+    word-break: break-all;
+    -moz-hyphens:auto;
+    -webkit-hyphens:auto;
+    -o-hyphens:auto;
+    hyphens:auto;
+}
+
+.hide-long-names {
+    overflow: auto;
+}
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.html
index 3194483e2a..f5670baefb 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-comments.component.html
@@ -7,11 +7,8 @@
 
 <div class="menu-container" *ngIf="comments?.length > 0">
     <ul class='mdl-list'>
-        <li class="mdl-list__item" *ngFor="let comment of comments">
-            <span class="mdl-list__item-primary-content">
-            <i class="material-icons mdl-list__item-icon">comment</i>
-            {{comment.message}}
-            </span>
+        <li class="mdl-list__item list-wrap" *ngFor="let comment of comments">
+            <span class="mdl-list__item-primary-content hide-long-names"><i class="material-icons mdl-list__item-icon">comment</i>{{comment.message}}</span>
         </li>
     </ul>
 </div>