Question

我已经为数据库中的姓名，职位和电子邮件做了一个foreach循环。由于我的填充，并且由于某些名称比其他名称更长，因此它会强制它换行。如果名称中有空格，我怎样才能自动将列中的最后一个单词（例如姓氏姓氏）下推到新行？因此，Lastname将被推送到新行。我在名为＆＃39; name＆＃39;的一列中有名字和姓氏。是否有一个简单的CSS修复程序？

HTML / BLADE：

<a href="#">

CSS：

<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>

目前它看起来像这样：

＆＃13;

  .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;
}

＆＃13;

.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;
}

＆＃13;

Answer 1

我刚刚将width: 50%;添加到h4标记类中。

在Laravel 5.3中强制使用新的文本行

1 个答案: