Настроить новую строку текста в Laravel 5.3

Question

Я создал цикл foreach для имен, названий вакансий и электронных писем из базы данных. Из-за моего заполнения и из-за того, что некоторые имена длиннее других, он приводит его к новой строке. Как я могу сделать это автоматически, нажимать последнее слово в столбце, например (имя первого имени), на новую строку, если в имени есть пробел? Так что Lastname будет перенесено на новую строку. У меня есть имя и фамилия в одном столбце с именем «имя». Есть ли легкое исправление CSS для этого?

HTML/BLADE:

<div class="row"> 
    @foreach ($users as $user) 
    <div class="col-md-2 col-sm-4 col-xs-12"> 
     <div class="ama-roster"> 
     <img class="img-circle img-rounded" src="{{ $user->avatar }}" /> 
      <div class="ama-roster-content"> 
      <h4>{{ $user->name }}</h4> 
      <p>{{ $user->jobTitle}}</p> 
      <p>{{ $user->email }}</p> 
      </div> 
     </div> 
    </div> 
    @endforeach 
    </div> 

CSS:

.ama-roster { 
    width: 100%; 
    height: auto; 
    } 

.ama-roster-content { 
    padding: 10px 10px; 
} 

.ama-roster img { 
    width: 100%; 
    padding: 0; 
} 

.ama-roster-content p { 
    line-height: 0.5; 
} 

.ama-roster-content h4 { 
    color: #274260; 
} 

В настоящее время это выглядит следующим образом:

.ama-roster { 
 
    height: auto; 
 
    display: inline-block; 
 
} 
 

 
.ama-roster-content { 
 
    padding: 10px 10px; 
 
} 
 

 
.ama-roster img { 
 
    width: 200px; 
 
    height: 250px; 
 
    padding: 0; 
 
} 
 

 
.ama-roster-content p { 
 
    line-height: 0.5; 
 
} 
 

 
.ama-roster-content h4 { 
 
    color: #274260; 
 
}

<div class="ama-roster"> 
 
      <img class="img-circle img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-6.jpg" /> 
 
       <div class="ama-roster-content"> 
 
       <h4>First <br>Name</h4> 
 
       <p>Boss</p> 
 
       <p>firstname@mail.com</p> 
 
       </div> 
 
</div> 
 

 
<div class="ama-roster"> 
 
      <img class="img-circle img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-6.jpg" /> 
 
       <div class="ama-roster-content"> 
 
       <h4>First Name</h4> 
 
       <p>Boss</p> 
 
       <p>firstname@mail.com</p> 
 
       </div> 
 
</div> 
 

 
<div class="ama-roster"> 
 
      <img class="img-circle img-rounded" src="http://www.bitrebels.com/wp-content/uploads/2011/02/Original-Facebook-Geek-Profile-Avatar-6.jpg" /> 
 
       <div class="ama-roster-content"> 
 
       <h4>First <br>Name</h4> 
 
       <p>Boss</p> 
 
       <p>firstname@mail.com</p> 
 
       </div> 
 
</div>

Answer 1

I дзю st добавили width: 50%; в класс тегов h4.