diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css
index d8cb259655..2c424d1540 100644
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@@ -127,7 +127,8 @@ limitations under the License.
     font-weight: 300;  
     padding-left: 16px;
     padding-right: 16px;
-    overflow-y: scroll;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_RoomHeader_avatar {
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 92cc87ba10..5f10bbefe6 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -54,7 +54,6 @@ limitations under the License.
 
     border-bottom: 1px solid #a8dbf3;
 
-    overflow: scroll;
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
 }
diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js
index cb481454da..8b1a207545 100644
--- a/skins/base/views/molecules/RoomHeader.js
+++ b/skins/base/views/molecules/RoomHeader.js
@@ -82,7 +82,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_name">
                         <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
                     </div>
-                if (topic) topic_el = <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div>;
+                if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
                 settings_button = (
                     <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}>
                         <img src="img/settings.png" width="32" height="32"/>