How to resize the div when the span inside div is wrapped?

Question

Currently I have a div which has a max-width:200px, inside the div there are some spans with a property white-space:nowrap and display: inline-block.

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
 white-space:nowrap;
}

<div class="a">
 <span class="b">A</span> <span class="b">B</span>
 <span class="b">C</span>
</div>

The current behavior is that when the length of span A and span B is over the max-width of div, span B is wrapped into next line.

<div class="a">
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
</div>

However, the width of div is not resized corresponding to the length of the span. It always has a width of 200px which causes the problem that there are empty space after span.

What I want is to make sure the div resize by the length of the span, without any empty space.

Anyone can help me with this? I'm not asking for an answer directly. Some explanation would be better.

explanation: [Make container shrink-to-fit child elements as they wrap](http://stackoverflow.com/q/37406353/3597276) — Michael Benjamin, Sep 15 '16 at 00:59
what did you expect to happen instead? if A+B cannot fit on the same line AND you put nowrap so the span's content cannot go into the next line, the inline-block property will push B into the next line. — softwarenewbie7331, Sep 15 '16 at 01:15
The first line which has A+B will become shorter after B pushed into next line, right? What I expect to see is that the width of the div should be a little bit more wider than the length of A or B or C. But the actual outcome is that there are lots of white space between span A(or B or C) and the right side of the div. — Francis Zhu, Sep 15 '16 at 04:01

score 1 · Answer 1 · answered Sep 15 '16 at 00:58

1

Using max-width will not allow the div to be wider than given value (200px in this case) using min-width instead of max-width might help you...

answered Sep 15 '16 at 00:58

Ankur Pathak

49
6

: ) Thanks for your answer. Actually, I don't want to the div to be wider, instead, I want to div to be narrower. – Francis Zhu Sep 15 '16 at 03:59
then you should set `div.a` to `display:inline-block;` – Ankur Pathak Sep 15 '16 at 07:13

softwarenewbie7331 · Answer 2 · 2016-09-15T08:44:42.957

1

.a {
  max-width:200px;
}

.b {
 display: inline-block; 
}
.c {
 white-space:nowrap;
}

<div class="a">
  <div class="c">
   <span class="b">A</span> <span class="b">B</span>
  </div>
  <span class="b">C</span>
</div>

you can force A & B to be on the same line like this, not very elegant, I suggest using a column/grid framework for easier control over these types of elements.

you probably have to decide how to handle overflow-x if you keep having content that exceeds 100px

you can try flexbox (as a bonus tries to handle extra whitespace for you):

.a {
  max-width:200px;
  display:flex;
  flex-direction:row;
}

.b {
 display: flex;
 flex: 1 1 100px;
}
</style>
</head>
<body>
<div class="a">
   <span class="b">A</span> <span class="b">B</span>
  <span class="b">C</span>
</div>

edited Sep 15 '16 at 08:44

answered Sep 15 '16 at 01:16

softwarenewbie7331

967
6
12

Thanks for your heads up. I indeed need a overflow for handling the case when content exceeds the max-width. – Francis Zhu Sep 15 '16 at 04:26
Force A and B in the same line is not what I want. What I want is that keep adding span in the same line as long as they are not exceeding the max-width of the div. Once they exceed the max, then the span which causes the situation will be wrapped into next line. – Francis Zhu Sep 15 '16 at 04:30
word of caution is that flexboxes don't play well with other grid frameworks – softwarenewbie7331 Sep 15 '16 at 08:45

score 1 · Answer 3 · answered Sep 15 '16 at 01:42

1

.a {
  max-width:200px;
}

#sameline {
display:inline-block;
 white-space:nowrap;
}

<div class="a">
   <div id=sameline>
 <span class="b">A</span> Empty space here
 <span class="b">B</span> Empty space here
 <span class="b">C</span> Empty space here
    </div>
</div>

answered Sep 15 '16 at 01:42

Gowtham

1,557
12
24

Thanks for your answer, but I don't want all the spans in the same line. : ) – Francis Zhu Sep 15 '16 at 04:38
ok then how you want it??, any screenshot of expexted output will be easy to me – Gowtham Sep 15 '16 at 04:39
http://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap clearly states my problem, sorry for my previous poor problem statement. : ) – Francis Zhu Sep 16 '16 at 00:04

Felypp Oliveira · Answer 4 · 2016-09-15T03:08:56.653

As far as I understood, your problem seems the display: inline-block; on the <span>... try to remove this style and use the default, which should be display: inline;...

Although the span is acting in an inline form, it is also acting in a block form, which means it will break down when there's no more available width on its parent, generating the said empty space.

EDIT

Forgot to mention... also, remove the white-space: nowrap;...

score 1 · Answer 5 · answered Sep 15 '16 at 03:51

1

.a{
max-width:200px; 
margin:5px; 
display:inline-block; 
white-space:nowrap; 
 }

<div class="a"> 
<span class="b">A</span> Empty space here 
<span class="b">B</span> Empty space here
<span class="b">C</span> Empty space here
</div>

answered Sep 15 '16 at 03:51

Razia sultana

2,168
3
15
20

In this case, all the spans are in the same line which is not what I want. : ) – Francis Zhu Sep 15 '16 at 04:38

score 0 · Answer 6 · answered Sep 15 '16 at 01:02

0

in the class a， white-space default is normal ，the browser ignore empty space， you can add border to see！

answered Sep 15 '16 at 01:02

遁地龙卷风

40
4

How to resize the div when the span inside div is wrapped?

6 Answers6