migas responsivas

app/assets/stylesheets/application.scss

@@ -355,6 +355,13 @@ $bezier: cubic-bezier(0.75, 0, 0.25, 1);
   .text-column-#{$size} {
     column-count: $size;
   }
+
+  .line-clamp-#{$size} {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: $size;
+    -webkit-box-orient: vertical;
+  }
 }
 
 /*

app/views/layouts/_breadcrumb.haml

@@ -4,13 +4,13 @@
       title: t('svg.sutty.title'), desc: t('svg.sutty.desc')
 
   %nav{ aria: { label: t('.title') } }
-    %ol.breadcrumb
+    %ol.breadcrumb.m-0.flex-wrap
       - breadcrumb_trail do |crumb|
         %li.breadcrumb-item{ class: crumb.current? ? 'active' : '' }
           - if crumb.current?
-            %span{ aria: { current: 'page' } }= crumb.name
+            %span.line-clamp-1{ aria: { current: 'page' } }= crumb.name
           - else
-            %span= link_to crumb.name, crumb.url
+            %span.line-clamp-1= link_to crumb.name, crumb.url
 
   - if current_usuarie
     %ul.navbar-nav