diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e4ca6edbfc..a60951f9e2 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -328,16 +328,24 @@ var RoomSubList = React.createClass({
 
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
         var chevronClasses = classNames({
             'mx_RoomSubList_chevron': true,
             'mx_RoomSubList_chevronUp': this.state.hidden,
             'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
             'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
         });
+
+        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
+        var isTruncatable = this.props.list.length > TRUNCATE_AT;
+        if (!this.state.hidden && this.state.capTruncate && isTruncatable) {
+            roomCount = TRUNCATE_AT + " of " + roomCount;
+        }
+
         return (
             <div onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <div className="mx_RoomSubList_roomCount">{this.props.list.length > 0 ? this.props.list.length : ''}</div>
+                <div className="mx_RoomSubList_roomCount">{roomCount}</div>
                 <div className={chevronClasses}></div>
                 <div className="mx_RoomSubList_badge">0</div>
             </div>
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/RoomSubList.css
index 974cf3e716..aeef4a424b 100644
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -44,6 +44,7 @@ limitations under the License.
     font-weight: normal;
     color: #76cfa6;
     padding-left: 5px;
+    text-transform: none;
 }
 
 .collapsed .mx_RoomSubList_roomCount {