Question

0

346

Visualizações

Shorten the text and prevent it from wrapping

I have problem with flexbox in Bootstrap.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">lorem ipsum dolor sit amet abcdefg</h5><small class="text-muted"><i class="bi bi-calendar3 text-muted"></i>&nbsp 21.05.2022</small>
  </div>
  <p class="mb-1">333 PLN</p>
  <small class="text-muted">lorem ipsum</small>
  </a>
</div>

When I use it on mobile device, text wraps and it looks weird. Picture How can I shorten this text and get something like "lorem ipsum dol..." and make date label look normal?

about 4 years ago · Juan Pablo Isaza

Responde à pergunta

0

346

Shorten the text and prevent it from wrapping

Encontrar trabalhos remotos

Andres GPT