Wrap text on 2 lines for smallest width

Issue

I have a button with a flexible width. I would like to let the text wrap to 2 lines to keep the button's width as small as possible. Below are some examples.

Short words should still be wrapped to 2 lines to keep the button width small:

My     
Button

A long description should wrap to the smallest resulting width:

My button with 
very long text 

A long word should just stay on one line, and the button will be larger:

Abcdefghijklmnopqrstuvwxyz

I've only managed to make the button wrap if I give it a width, but I want the width to be flexible. Is that possible?

My last resort would be to parse the text with js and add a <br> element, but if a more elegant CSS solution exists I would prefer that.

Solution

Yeah you can do it like this:

index.html:

<button>
  Hello world!
</button>

style.css

button {
  width: min-content;
  padding: 1rem 2rem;
}

index.html:

<button>
  Hello world! @#@#@#@#@#@#@#@#@#@#@#@
</button>

Give it a min-width if you don't want it to be too small.

Answered By - Parsa Arvaneh