diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss
index a61db1e617cc..a172270de6e5 100644
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@@ -204,10 +204,19 @@ limitations under the License.
     }
 
     .mx_UserInfo_statusMessage {
+        $statusLineHeight: 16px;
+        $statusNumberOfLines: 3;
+
         font-size: $font-11px;
+        line-height: $statusLineHeight;
         opacity: 0.5;
         overflow: hidden;
-        text-overflow: clip;
+        word-break: break-word;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        max-height: calc($statusLineHeight * $statusNumberOfLines);
+        -webkit-line-clamp: $statusNumberOfLines;
+        -webkit-box-orient: vertical;
     }
 
     .mx_AutoHideScrollbar {
diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx
index 8c7b29777ed2..2c920eecf615 100644
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@@ -1575,7 +1575,7 @@ const UserInfoHeader: React.FC<{
 
     let statusLabel = null;
     if (statusMessage) {
-        statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
+        statusLabel = <div className="mx_UserInfo_statusMessage">{ statusMessage }</div>;
     }
 
     let e2eIcon;