How to make the button size increase automatically when the element size in the button is increased-CodePudding

I am using paragraph tag and img tag inside a button tag and added some css properties to button so it look like the below image. The problem is when i increase text in paragraph the text is overflowing out of the button, I want to wrap it inside the button. Below is my code,

<button  id="btn_one" onclick="myFunction()">
        <img src="./icon1.png"/>
        <p>Bauleistungenfdssfdsfasadsf</p>
    </button>

.white-btn {
width: 20%;
height: 151px;
background: #ffffffb8;
border-radius: 12px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
flex-grow: 1;
border: none;

CodePudding user response：

Add word-break: break-all; in your white-btn class and its all good now.

CodePudding user response：

Try this hope it's works

.white-btn {
width: 20%;
height: 151px;
background: blue;
border-radius: 12px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
flex-grow: 1;
border: none;
  word-break: break-word;
  
}

<button  id="btn_one" onclick="myFunction()">
        <img src="./icon1.png"/>
        <p>Bauleistungenfdssfdsfasadsf</p>
    </button>

CodePudding user response：

Try using word-break with max-width. You will be able to set a max length for button to 'grow, before it hits a limit and breaks to the next line.

Update: I just realized word-break: break-word has been deprecated. Added several other examples to show the 'break' with other properties.

.white-btn {
  width: 20%;
  height: 151px;
  background: red;
  border-radius: 12px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border: none;
  min-width: 250px;
}

.width-auto {
  width: auto !important;
  max-width: 40%;
  word-break: break-all;
}

.width-overflow-wrap-break-word {
  width: auto !important;
  max-width: 30%;
  overflow-wrap: break-word;
}

.width-overflow-wrap-anywhere {
  width: auto !important;
  max-width: 40%;
  overflow-wrap: anywhere;
}
.width-fix {
  width: 300px;
  word-break: break-all;
}

  
  <p> Original </p>
  <button  id="btn_one" onclick="myFunction()">
      <img src="https://via.placeholder.com/150"/>
      <p>Bauleistungenfdsdfasdfsadfsdfasdfssfdsfasadsf</p>
  </button>
  
  <br>
  <p> word-break: break-all; </p>
  <button  id="btn_one" onclick="myFunction()">
      <img src="https://via.placeholder.com/150"/>
      <p>Bauleistungenfdsdfasdfsadfssdfasdfasdasdfasdfasdffdfasdfssasdfsdfasfasffdsfasadsf</p>
  </button>
   
  <br>
  <p> overflow-wrap: break-word; </p>
  <button  id="btn_one" onclick="myFunction()">
      <img src="https://via.placeholder.com/150"/>
      <p>For long sentence with multiple breaks inbetween.</p>
  </button>
  <br>
  
  <p> overflow-wrap: anywhere; </p>
  <button  id="btn_one" onclick="myFunction()">
      <img src="https://via.placeholder.com/150"/>
      <p>ForAVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongSentence</p>
  </button>
  <br>
  
   <p> word-break: break-all; </p>
  <button  id="btn_one" onclick="myFunction()">
      <img src="https://via.placeholder.com/150"/>
      <p>Bauleistungenfdsdfasdfsadfsdfasdfssfdsfasadsf</p>
  </button>

CodePudding user response：

Here is my try, I have added some explanation comments in the code, hope this help!

.white-btn {
  min-width: 20%;  /*Changed this line*/
  max-width: 100%; /*optional, this is to make sure it's not more than the container*/
  min-height: 151px; /*optional, so the height also can increase following the content of the button*/
  background: red; /*I just change this as example purposes, to make the button visible to me*/
  border-radius: 12px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border: none;
  word-break: break-word; /*Added this line*/
}
img {
  width: 150px;  /*this is optional*/
}

<button  id="btn_one" onclick="myFunction()">
    <img src="https://jenmulligandesign.com/wp-content/uploads/2017/04/pexels-beach-tropical-scene-free-stock-photo.jpg"/>
    <p>Bauleistungenfdssfdsfasadsf Bauleistungenfdssfdsfasadsf Bauleistungenfdssfdsfasadsf</p>
</button>

CodePudding user response：

You do that with

.white-btn {
   max-width: fit-content;
}