diff --git a/index.html b/index.html
index 46201c21..5ddea75e 100644
--- a/index.html
+++ b/index.html
@@ -70,7 +70,7 @@
         <script type='text/x-tmpl-mustache' id='contact'>
             <div class='avatar' style='background-image: url({{ contact_avatar }});'></div>
             <div class='contact-details'>
-                <h3>
+                <h3 class='contact-name'>
                 {{ contact_name }}
                 </h3>
                 <p class='last-message'>
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 60687f86..d558edfc 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -152,6 +152,11 @@ body {
       .gutter .contact .contact-details h3 {
         font-size: 13px;
         margin-bottom: 4px; }
+      .gutter .contact .contact-details .contact-name {
+        width: 105px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis; }
       .gutter .contact .contact-details .last-message {
         color: #999999;
         letter-spacing: 0.15px;
diff --git a/stylesheets/view/_gutter.scss b/stylesheets/view/_gutter.scss
index 1ebe2c22..3d131cc1 100644
--- a/stylesheets/view/_gutter.scss
+++ b/stylesheets/view/_gutter.scss
@@ -87,6 +87,12 @@
           font-size:13px;
           margin-bottom:4px;
         }
+        .contact-name {
+          width: 105px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
         .last-message {
           color:lighten(#333, 40%);
           letter-spacing:0.15px;