diff --git a/res/css/views/messages/_ReactionsRowButton.scss b/res/css/views/messages/_ReactionsRowButton.scss
index 3c6d019b30..e54201d963 100644
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_ReactionsRowButton {
-    display: inline-block;
+    display: inline-flex;
     height: 20px;
     line-height: 21px;
     margin-right: 6px;
@@ -35,3 +35,11 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 }
+
+.mx_ReactionsRowButton_content {
+    max-width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 4px;
+}
diff --git a/src/components/views/messages/ReactionsRowButton.js b/src/components/views/messages/ReactionsRowButton.js
index 33325b5592..ac44ec5d56 100644
--- a/src/components/views/messages/ReactionsRowButton.js
+++ b/src/components/views/messages/ReactionsRowButton.js
@@ -101,7 +101,12 @@ export default class ReactionsRowButton extends React.PureComponent {
             onMouseOver={this.onMouseOver}
             onMouseOut={this.onMouseOut}
         >
-            {content} {count}
+            <span className="mx_ReactionsRowButton_content">
+                {content}
+            </span>
+            <span className="mx_ReactionsRowButton_count">
+                {count}
+            </span>
             {tooltip}
         </span>;
     }