diff --git a/assets/styles/framework/typography.less b/assets/styles/framework/typography.less
index 269dcfae0b..9a73f48b08 100644
--- a/assets/styles/framework/typography.less
+++ b/assets/styles/framework/typography.less
@@ -11,3 +11,10 @@
   white-space: nowrap;
   display: block;
 }
+
+.multiline-ellipsis(@lines: 2) {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @lines;
+  -webkit-box-orient: vertical;  
+}
diff --git a/components/views/user/User.less b/components/views/user/User.less
index 77bc9b5381..abf6be099d 100644
--- a/components/views/user/User.less
+++ b/components/views/user/User.less
@@ -36,17 +36,13 @@
     }
 
     .subtitle {
-      height: 30px;
-      display: inline-block;
-      min-width: 0;
-      font-size: @micro-text-size;
-      line-height: 1.4;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      height: @mini-text-size * 1.2 * 2;
+      line-height: 1.2;
       font-size: @mini-text-size;
       color: @text-muted;
       font-family: @secondary-font;
       pointer-events: none;
+      .multiline-ellipsis(2);
     }
 
     flex: 1;