How can I have a CSS item with dynamic, wrapping text adjust its width to the visible width of the text when it's wrapped?

Question

I feel like I'm losing my mind...

span {
  max-width: 150px;
  display: inline-block;
  background: yellow
}

<span>words words words words words words words words </span>

What I want: The yellow box to be no wider than the longest line of text.

What I get: Lots of empty space on the right hand side.

A few years ago I could have believed this was a limitation of CSS. But it's 2023, things are supposed to be good these days...

I've tried everything I can think of, floats, tables, flex, grid, obscure property values like fit-content etc.

I THINK I'm coming to the conclusion that this isn't possible without javascript?

Can someone confirm? Can someone explain WHY?

Or am I missing something simple?

Thank you!

Try "line-break: anywhere". It's not exactly what you need, but it's close. https://jsfiddle.net/5g4r3bhq/ — Anton Podolsky, Feb 15 '23 at 13:36
As to why this is seemingly impossible, I don't think there's generally a need for such a feature. — Anton Podolsky, Feb 15 '23 at 13:38
I'm sure there's plenty of need for such a feature. In my instance, my is actually an with someone's name in it, and a radio button which I want to sit immediately to the right of the name. The best "bodge" I can come up with so far is to put the radio button inside the tag - I just need to figure out the appropriate JS to prevent clicking the radio button from clicking the link. — Codemonkey, Feb 15 '23 at 13:43
That is just horrible UX. I guess you don't need an a-tag, but rather a label. and in the label you can position the text next to the radiobutton however you need. — cloned, Feb 15 '23 at 13:45
Here's an example using "hyphens: auto" - https://jsfiddle.net/5g4r3bhq/2/, which is more readable. — Anton Podolsky, Feb 15 '23 at 13:46
_"The best "bodge" I can come up with so far is to put the radio button inside the tag "_ - `a` and `input` are both in the category _interactive elements_, and as such must not be nested. — CBroe, Feb 15 '23 at 13:47
It's actually "great" UX that I'm going for @cloned, and I'm the only U. This is in an admin system I spend half of my days using. I desire the name to be an a tag so the profile can be opened up in another tab, if needed. CBroe - I undestand your point, but if I can hack this with javascript, I will. (So far am failing...) — Codemonkey, Feb 15 '23 at 13:57
Luckily @jme11 has come to my rescue, answer implemented and accepted — Codemonkey, Feb 15 '23 at 14:03

score 2 · Accepted Answer · answered Feb 15 '23 at 13:47

I think you're looking for box-decoration-break: clone. Make sure that your element is set to display: inline and use a wrapping container to control the width.

.container {
  max-width: 15rem;
}

span {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;


  /* Just for  purposes */
  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 3rem;
  color: hsl(0 0% 100% / 1);
  line-height: 1.2;
  text-transform: uppercase;
  background: darkviolet;
  padding: .5rem 1rem;
}

<div class="container">
  <span>different words with different lengths to make it interesting</span>
</div>

@Codemonkey box-decoration is only needed if you want to keep the padding on each line. The main fix is to use an inline element — Temani Afif, Feb 15 '23 at 15:21

How can I have a CSS item with dynamic, wrapping text adjust its width to the visible width of the text when it's wrapped?

1 Answers1