javascript - 引导 4 卡

Question

我正在使用卡片在 Bootstrap 4 的帮助下进行显示。

问题是文字还是超限，只要你想让文字自动下到底部。任何人都可以解决这个问题？

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="scrolling-wrapper">
  <!-- Board card -->
  <div class="card bg-light" style="width: 320px;">
    <div class="card-body">
      <div class="row">
        <p style="font-weight: 600; font-size: 17px;" class="text-dark">
          To Do
        </p>
      </div>
      <!-- Board task -->
      <div class="row mb-2">
        <div class="board-content">
          <div class="row">
            <div class="col-6">
              <p class="brandName card-title card-text">
                Register asokdasokd apodk saoksa dokasokdpask asdasa gdffgfdfgdffgdfgfddffgf gdgdfgdf
              </p>
            </div>
            <div class="col-6 text-right">
              <button class="btn btn-primary">tes</button>
            </div>
          </div>
        </div>
      </div>

      <!-- Button create task -->
      <div class="row justify-content-center">
        <button class="btn p-0 mt-2 btn-transparent btn-create-task" data-toggle="modal" data-target=".bd-example-modal-lg">
                          <i class="fas fa-plus"></i> Create Task
                        </button>
      </div>
    </div>
  </div>
  <!-- End of board -->

Answer 1

像这样使用text-wrap-

<p class="brandName card-title card-text text-wrap">
  Register asokdasokd apodk saoksa dokasokdpask asdasa gdffgfdfgdffgdfgfddffgf gdgdfgdf
</p>

Answer 2

如果你在文本中插入了一个简单的刹车线？

例子：

Register asokdasokd apodk saoksa <br>
dokasokdpask asdasa gdffgfdfgdffgdfgfddffgf gdgdfgdf