Question 187486 in CSS Question posted in
Some basic documentation can be found here.

Css – How to achieve a flexible width button based on text length

Given the following snippet:

.btn{
  border:2px solid black;
    display:inline-flex;
  padding:0.5rem;
  max-width: 135px;
}
<a href="#" class="btn">
   Vuvezelas & Reports
</a>

You can see that because of the max width on the button, the text flows onto a second line, what I would like to do is reduce the width of the button if that happens.

Like the following:

enter image description here

Tags:

2

Answers


  1. 0

    You can use the white-space property of CSS and give it a nowrap value. It will prevent the text from flowing onto the second line.

    .btn {
  border: 2px solid black;
  display: inline-flex;
  padding: 0.5rem;
  max-width: 135px;
  white-space: nowrap;
}
    <a href="#" class="btn">
  Vuvezelas & Reports
</a>

    CSS white-space Property

    Login or Signup to reply.
  2. 0

    use fit-content instead of px
    for more details read doc :- https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

    .btn{
  border:2px solid black;
  display:inline-flex;
  padding:0.5rem;
  max-width: fit-content;  //change
  
}
    <a href="#" class="btn">
   Vuvezelas & Reports
</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search