prevents pagination text from overlapping one another

app/assets/stylesheets/content/_pagination.md

@@ -14,12 +14,12 @@
       <li class="pagination--item"><a>34</a></li>
       <li class="pagination--item"><a>35</a></li>
       <li class="pagination--item -next"><a>Next</a></li>
-      <li class="pagination--range">(1 - 50/820)</li>
+      <li class="pagination--range" title="(1 - 50/820)">(1 - 50/820)</li>
     </ul>
   </nav>
   <div class="pagination--options">
     <ul class="pagination--items">
-      <li class="pagination--label">Per page:</li>
+      <li class="pagination--label" title="Per page:">Per page:</li>
       <li class="pagination--item"><a>10</a></li>
       <li class="pagination--item"><a>20</a></li>
       <li class="pagination--item -current">50</li>

app/assets/stylesheets/content/_pagination.sass

@@ -70,9 +70,13 @@
   padding: 3px 0px
   white-space: nowrap
   text-align: right
+  overflow: hidden
+  text-overflow: ellipsis
 
 .pagination--range
   +flex(1)
   margin: 0 0 0 5px
   padding: 3px 0px
   display: block
+  overflow: hidden
+  text-overflow: ellipsis

public/templates/components/table_pagination.html

@@ -45,13 +45,13 @@
         </a>
       </li>
 
-      <li class="pagination--range">{{ currentRange }}</li>
+      <li class="pagination--range" title="{{ currentRange }}">{{ currentRange }}</li>
     </ul>
   </nav>
 
   <div class="pagination--options">
     <ul class="pagination--items">
-      <li class="pagination--label">{{ I18n.t('js.label_per_page') }}</li>
+      <li class="pagination--label" title="{{ I18n.t('js.label_per_page') }}">{{ I18n.t('js.label_per_page') }}</li>
 
       <li ng-repeat="perPageOption in paginationOptions.perPageOptions"
           ng-class="{ '-current': perPageOption == paginationOptions.perPage }"