skip to Main Content

I’m making a display with the help of Bootstrap 4 using a card.

the problem is that the text is still over the limit, as long as you want the text to automatically go down to the bottom. anyone can solve this problem?

enter image description here

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

2

Answers


  1. If you inserted a simple brake-line in the text?

    Example:

    Register asokdasokd apodk saoksa <br>
    dokasokdpask asdasa gdffgfdfgdffgdfgfddffgf gdgdfgdf
    
    Login or Signup to reply.
  2. Use text-wrap like this –

    <p class="brandName card-title card-text text-wrap">
      Register asokdasokd apodk saoksa dokasokdpask asdasa gdffgfdfgdffgdfgfddffgf gdgdfgdf
    </p>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search