seperate images

resources/views/user-layouts/my-design.blade.php

@@ -1,5 +1,12 @@
 @extends('user-layouts.user_template')
 @section('content')
+    <style>
+        .design-name-holder{
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    </style>
     <div class="content-wrapper" style="min-height: 916px;">
         <!-- Content Header (Page header) -->
         <section class="content-header">
@@ -26,7 +33,7 @@
                                     <div class="col-md-3 col-sm-6">
                                         <span class="thumbnail">
                                             <img src="{{ config('site_config.prod_private_server_ip')  }}/images/{{ $row->DesignCode }}-front-thumbnail.png" alt="{{ $row->DesignName }}" >
-                                            <h4>{{ $row->DesignName }}</h4>
+                                            <h4 class="design-name-holder">{{ $row->DesignName }}</h4>
                                             <small>{{ date('F j, Y g:i a', strtotime($row->DateCreated)) }}</small>
                                             <hr class="line">
                                                 <div class="row">