CODEWITHSUNDEEP
htmlcss
codefactor
codefactor

Reputation: 1656

Simple wrapping text in a button but with minimized width without unnecessary white space

I have a button that has a max-width with text inside of it that can wrap. If the text inside wraps, the button width matches the max-width and leaves white space on the right side.

How do I get the button to minimize its width?

.button {
  max-width: 120px;
  border: 1px solid black;
  display: inline-block;
  word-wrap: break-word;
}

Here is a simple example html (also jsfiddle)

<div class="button">Account Navigation</div>

This button ends up looking like this (forgive the crude ascii representation of the borders):

|----------------|
|Account         |
|Navigation      |
|----------------|

But I want it to be like this:

|----------|
|Account   |
|Navigation|
|----------|

But if you give text that needs more space because of longer words, then it should make the button wider and break any words if they are too long like this:

|----------------|
|Supercalifragili|
|sticexpialidocio|
|us              |
|----------------|

This seems so basic to me - yet I couldn't find this exact issue mentioned.

Edit: The button is actually the Account Navigation button, which happens to wrap this way, but the actual text inside the button will be the user's first and last name. So the text inside the button is dynamic, it might all fit in one line - or it might need to wrap in 2 or 3 lines.

Also it is preferred to show the entire text, rather than cut it off with an ellipsis. I would like a CSS-only solution but if it turned out that Javascript was my only option, it wouldn't be the end of the world - since already I do some logic to reduce the size of the font if the button becomes too tall.

Upvotes: 2

Views: 5031

Answers (1)

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

Ok, so two things to cover here:

  1. To have the words break when they are super long, just add the property word-break: break-word;. This will break just long words that reached the boundary of the container.

  2. Your container will not reduce its size because when a text node goes under another one, the container is technically still the same size, just that one of its text nodes moved lower. To control how this affects your buttons, you have two options:

    a. Correct the max-width value to be way less than 120px, one that is good enough to hold most of the probable text you'll write for the buttons.

    b. Add some padding-left to the buttons to make up for its right size.

You can check the fiddle I created for this (using the padding solution) here: https://jsfiddle.net/Ahm7777/aL4L8m5q/5/.

Update

Well, I can't really think of any CSS solution for this, as it's kind of an expected behavior from the interaction of all properties defined, but the easier approach would just be to have a span wrapping the words on the button, retrieve its width and apply it to the button. Here is the fiddle with the sample of what I'm talking about. You'll just have to apply the code to get executed whenever the buttons end loading their text

Upvotes: 3

Related Questions