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?
<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
If you inserted a simple brake-line in the text?
Example:
Use
text-wrap
like this –