diff --git a/resources/assets/js/components/shared/album-item.vue b/resources/assets/js/components/shared/album-item.vue
index 2726cb83..82f81b18 100644
--- a/resources/assets/js/components/shared/album-item.vue
+++ b/resources/assets/js/components/shared/album-item.vue
@@ -6,13 +6,15 @@
       </a>
     </span>
     <footer>
-      <a class="name" @click.prevent="viewAlbumDetails(album)">{{ album.name }}</a>
-      <span class="sep">by</span>
-      <a class="artist" v-if="isNormalArtist"
-        @click.prevent="viewArtistDetails(album.artist)">
-        {{ album.artist.name }}
-      </a>
-      <span class="artist nope" v-else>{{ album.artist.name }}</span>
+      <div class="info">
+        <a class="name" @click.prevent="viewAlbumDetails(album)">{{ album.name }}</a>
+        <span class="sep">by</span>
+        <a class="artist" v-if="isNormalArtist"
+          @click.prevent="viewArtistDetails(album.artist)">
+          {{ album.artist.name }}
+        </a>
+        <span class="artist nope" v-else>{{ album.artist.name }}</span>
+      </div>
       <p class="meta">
         <span class="left">
           {{ album.songs.length | pluralize('song') }}
diff --git a/resources/assets/js/components/shared/artist-item.vue b/resources/assets/js/components/shared/artist-item.vue
index 3e4f449d..41fde3b6 100644
--- a/resources/assets/js/components/shared/artist-item.vue
+++ b/resources/assets/js/components/shared/artist-item.vue
@@ -6,7 +6,9 @@
       </a>
     </span>
     <footer>
-      <a class="name" @click.prevent="viewArtistDetails(artist)">{{ artist.name }}</a>
+      <div class="info">
+        <a class="name" @click.prevent="viewArtistDetails(artist)">{{ artist.name }}</a>
+      </div>
       <p class="meta">
         <span class="left">
           {{ artist.albums.length | pluralize('album') }}
diff --git a/resources/assets/sass/partials/_mixins.scss b/resources/assets/sass/partials/_mixins.scss
index 9003ebc4..d0cf672a 100644
--- a/resources/assets/sass/partials/_mixins.scss
+++ b/resources/assets/sass/partials/_mixins.scss
@@ -129,6 +129,7 @@
       padding: 16px;
       background: #333;
       flex: 1;
+      overflow: hidden;
     }
 
     .name {
@@ -166,6 +167,15 @@
 
       .as-list & {
         display: inline;
+        white-space: inherit;
+      }
+    }
+
+    .info {
+      .as-list & {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }