Fit width of div tightly to multi-line span

Question

I want to have a div with a given max-width that tightly fits its width to its child's span. Everything works fine as long as the span is only one line, but as soon as the line break happens the parent div will have the maximum width.

.content {
  margin: 10px;
  max-width: 150px;
  border: 1px dotted black;
  display: inline-block;
}

<div class="content">
  <span>1 line works</span>
</div>
<br>
<div class="content">
  <span>2 lines dont workworkwork</span>
</div>

The first div has a tight fit, the second div however is set at the maximum width - but it could be tighter and I want it tighter. See also my pen at http://codepen.io/sheinzle/pen/gpVjbG

Is getting a tighter fit even possible in HTML?

try "word-break: break-all" on .content and see if that works for you — radiant, Aug 25 '15 at 16:15
That is a good way to adjust the size of the `span` to the container - but I am looking for the opposite, I am looking for a solution that adjusts the width of the container to the `span` — Simon Heinzle, Aug 25 '15 at 16:19
I see, a member just posted an answer. hope that's what you want. addition to word-break have max-width: 100% property — radiant, Aug 25 '15 at 16:22
This can't be possible because you cannot set `width` of `span` at all. — Junaid, Aug 26 '15 at 05:01
It is possible using JavaScript (get the `width` of the `span` and apply it to the parent `div`), see my answer below. However I would still prefer a pure HTML/CSS solution — Simon Heinzle, Aug 26 '15 at 09:59

score 2 · Answer 1 · answered Feb 21 '17 at 13:47

2

Use flexbox and place your styling on the inner span:

.content {
  margin:10px;
  max-width: 150px;
  display: flex;
}
.content span{
  flex: 0 1;
  border:1px dotted black;
}

<div class="content">
  <span>1 line works</span>
</div>

<br>

<div class="content">
  <span>2 lines alsoworkhere</span>
</div>

answered Feb 21 '17 at 13:47

Flyke

347
3
5

7

The length of the line in your solution is limited by the longest word in the text. Is you split the last word into two words "also workhere" there would be three lines: "2 lines", "also", "workhere". – d9k Jun 20 '19 at 09:09

Simon Heinzle · Accepted Answer · 2015-08-26T10:01:26.453

Thanks for all the answers so far. I still really hope that somebody has a pure HTML/CSS solution.

In the meantime, here is a quick fix with the help of JavaScript (CSS/HTML unchanged from OP). It probably doesn't catch all the edge cases, but it works for now. Pen is at http://codepen.io/sheinzle/pen/MwNdgO

document.addEventListener("DOMContentLoaded", function(event) {
  // get list of all spans
  list = document.querySelectorAll('.content span');
  for (var i=0; i<list.length; i++) {
    // retrieve width of span and apply it to parent
    w = list[i].offsetWidth;
    list[i].parentNode.style.width = w+"px";
  }
});

.content {
  margin:10px;
  max-width: 150px;
  border:1px dotted black;
  display:inline-block;
}

<div class="content">
  <span>1 line works</span>
</div>
<br>
<div class="content">
  <span>2 lines do workworkwork</span>
</div>

score 0 · Answer 3 · answered Aug 25 '15 at 16:07

0

Add word-break: break-all; to .content

Here is the demo

answered Aug 25 '15 at 16:07

Masoom

743
1
5
15

this would fit the `span` to the container by breaking words, which is the opposite of what the OP asked for – Luca Aug 25 '15 at 16:15
When the word is not breaking we found this issue which leaves us off blank space (looks loose). I believe now that blank space is not appearing which means Its looking tighter. – Masoom Aug 25 '15 at 16:21
that's incorrect. the OP wants the container to be as small as the `span` - see also his last comment to the question. – Luca Aug 25 '15 at 16:23
if `max-width` is not that much important, then you can remove `max-width` then it will fit. – Masoom Aug 25 '15 at 16:26
I agree it looks tighter - but as mentioned by @Luca I am looking for a solution that adapts the parent width correctly. `max-width` is important, unfortunately. – Simon Heinzle Aug 25 '15 at 17:17

Krsna Kishore · Answer 4 · 2015-08-26T04:35:29.140

-1

Added max-width: 150px; to both div and span

  .content {
  margin:10px;
   max-width: 150px;
  border:1px dotted black;
   display:inline-block;
   
}

.test{
   max-width: 150px;
   display:inline-block;
    word-break:break-all
}

   

  <div class="content">
      <span class="test">1 line works</span>
    </div>
    
    <br>
    
    <div class="content">
      <span class="test">2 is this what you wantsimon</span>
    </div>

edited Aug 26 '15 at 04:35

answered Aug 25 '15 at 16:20

Krsna Kishore

8,233
4
32
48

@Simon Hi I hope this is what you are looking for – Krsna Kishore Aug 25 '15 at 16:24
Hello Downvoter can i know the reason for downvote ? – Krsna Kishore Aug 25 '15 at 16:27
`word-break: break-all;` will "adjust the size of the span to the container - but I am looking for the opposite, I am looking for a solution that adjusts the width of the container to the span" - OP comment. Your answer is basically the same as the first comment posted and the other posted answer, and does not achieve what the OP wants. – Luca Aug 25 '15 at 16:36
also `max-width: 100%` alone IMHO does not address the problem, as the given `max-width` is most likely required, being explicitly mentioned in the question itself. – Luca Aug 25 '15 at 16:46
@Luca if i am not wrong is this what he is asking http://jsfiddle.net/Kri4shna/socdr8Lw/ – Krsna Kishore Aug 25 '15 at 16:46
what the OP wants is the container `div` to be as wide as the `span` Inspect the `span` on multiple lines, in his example and you will see its narrower than the div itself – Luca Aug 25 '15 at 16:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/87907/discussion-between-webruster-and-luca). – Krsna Kishore Aug 25 '15 at 16:50
@Webruster thanks for your answer. Unfortunately it does not work - it just happens that in your example the second string fits nicely. Replace `want simon` with `wantsimon` and you will have the same result as with the original post. – Simon Heinzle Aug 25 '15 at 17:11
@SimonHeinzle add `word-break:break-all` for class `test` – Krsna Kishore Aug 26 '15 at 04:35
@Webruster thanks again. using `word-break` makes the solution look tighter, but I would like to avoid word breaks. – Simon Heinzle Aug 26 '15 at 10:00

Fit width of div tightly to multi-line span

4 Answers4

Linked