Make box the size of wrapping content

Question

When content in a box wraps, the width of that box extends to fill up all available space. Is there a way to have the width of the box be its "effective visible size"?

Here's code and a codepen to try:

div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17rem;
}

span {
  border-bottom: 1px solid #444;
  text-align: center;
  font-size:29px;
}

<div>
  <span>
    Helloworld this willwrap
  </span>
</div>

https://codepen.io/rasteiner/pen/aXKwdZ?editors=1100#0

I'd like to have the border-bottom be only as wide as the widest text line.

Using a <br> tag is not an option.

I could set width: min-content on the span, but that would make the text wrap more than necessary.

short answer :you cannot (almost duplicate of this : https://stackoverflow.com/a/34996189/8620333) .. probably with some hack we can — Temani Afif, Feb 12 '19 at 15:16

score -1 · Answer 1 · answered Feb 12 '19 at 15:26

In your js fiddle just give you span a width inside of the div.

<div>
<div class="myClass">
  <span>
    Hello world this will wrap
  </span>
  <div>
</div>

and here is the css

body {
  font-size: 3rem;
}

.myClass {
  height: 16rem;
  width: 30%;
  background-color: #dedede;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 2rem;
}

.myClass span {
    width: 50%;
  border-bottom: 1px solid #444;
  text-align: center;
}

Make box the size of wrapping content

1 Answers1