Text larger than the button

Asked

Viewed 119 times

1

I got a problem I can’t seem to solve. I made an accordion, as in the image below using bootstra 4, the desktop version of it looks like this:

inserir a descrição da imagem aqui

But the cell phone version the text gets bigger and ends up extrapolating the limit, I tried to use overflow-x, but the result was not good. Is there any way when the text will exceed the limit of the button it goes down?

inserir a descrição da imagem aqui

https://bootsnipp.com/snippets/yNR8r

  • If you put the i within a p doesn’t work?

  • @leAndrade didn’t work :(

  • Put a class on this p and in css put white-space: normal

  • It worked! But now it’s breaking in the desktop version tbm, is there any way to take this attribute? I’m using the right media queries, but as white-space is already "normal", I don’t know "cancel" it

  • You’ll have to use media queries, knows how to use?

  • Ahhhh, it worked :) Actually I had a bug in Brackets that wasn’t updating the page, I applied white-space: normal only to the mobile version in media querie and it worked. Thank you!!!!!!!

  • Beauty, jewel that worked.

  • If you want to put the answer there I mark as a solution

Show 3 more comments

1 answer

1


<div class="card-header" id="headingOne">
  <h5 class="mb-0">
    <button class="btn btn-link btn-acrd" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
        <p class="p"><i class="fas fa-plus"></i> Quais convênios aceitamos?</p>
    </button>
  </h5>
</div>

<style>
.p{
  white-space: normal;
}
</style>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.