在 Laravel 5.3 中强制换行

Question

我为数据库中的姓名、职位和电子邮件创建了一个 foreach 循环。 由于我的填充，并且由于某些名称比其他名称长，它迫使它换行。每当名称中有空格时，如何使其自动将列中的最后一个单词（例如（Firstname Lastname））下推到新行？这样姓氏将被下推到新的一行。我在一个名为“名称”的列中有名字和姓氏。有没有简单的 CSS 修复方法？

HTML/刀片：

<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

我刚刚在 h4 标签类中添加了width: 50%;。