Laravel 5.3에서 새 텍스트 줄 강제 적용

Question

데이터베이스의 이름, 직위 및 전자 메일에 foreach 루프를 만들었습니다. 내 패딩 때문에 일부 이름이 다른 이름보다 길기 때문에 새 줄을 사용해야합니다. 이름에 공백이있을 때마다 열의 마지막 단어 (예 : 성 (Firstname 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는 h4 태그 클래스에 width: 50%;을 추가했습니다.