diff --git a/app/assets/stylesheets/mapcard.scss.erb b/app/assets/stylesheets/mapcard.scss.erb
index 8f30b00d..e13c3c6c 100644
--- a/app/assets/stylesheets/mapcard.scss.erb
+++ b/app/assets/stylesheets/mapcard.scss.erb
@@ -211,6 +211,16 @@
 
     span.creatorName {
       margin-left: 8px;
+      max-width: 162px;
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+    }
+
+    .creatorAndPerm.cardHasViewOnly span.creatorName {
+      max-width: 95px;
     }
 
     .cardViewOnly {
diff --git a/frontend/src/components/Maps/MapCard.js b/frontend/src/components/Maps/MapCard.js
index 61a6f5e1..a6200549 100644
--- a/frontend/src/components/Maps/MapCard.js
+++ b/frontend/src/components/Maps/MapCard.js
@@ -112,7 +112,7 @@ class MapCard extends Component {
               { mobile && hasConversation && <div className='mobileHasConversation'><MapperList mappers={ mapperList } /></div> }
               { mobile && d && <div className="desc">{ d }</div> }
               { mobile && <div className='mobileMetadata'><Metadata map={ map } /></div> }
-              <div className='creatorAndPerm'>
+              <div className={`creatorAndPerm ${map.authorizeToEdit(currentUser) ? '' : 'cardHasViewOnly'}`}>
                 <img className='creatorImage' src={ map.get('user_image') } />
                 <span className='creatorName'>{ map.get('user_name') }</span>
                 { !map.authorizeToEdit(currentUser) && <div className='cardViewOnly'>View Only</div> }