Laravel 5.3の新しいテキスト行を強制する

Question

データベースからの名前、職名、電子メールのためにforeachループを作成しました。 私のパディングのせいで、いくつかの名前が他の名前より長いため、それは新しい行に強制されます。名前の中にスペースがあるときは、自動的に列の最後の単語、たとえば（名字）を新しい行にプッシュダウンするようにするにはどうすればよいですか？そのため、Lastnameは新しい行にプッシュダウンされます。私は名前と姓の両方を「名前」という1つの列に持っています。このための簡単な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タグクラスに追加しました。