Geek Answers Handbook

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

I currently have a div that has a maximum width: 200px, inside the div there are some gaps with the white-space: nowrap and display: inline-block properties.

.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 the range A and span B exceeds the maximum width of the div, span B is wrapped in the 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 the div does not change, which corresponds to the length of the span. It always has a width of 200 pixels, which causes a problem when there is empty space after a space.

I want the div to resize along the span without any empty space.

Can anybody help me? I do not ask for an answer directly. Some explanation would be better.

+5
source share
6 answers

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

+1
source 
 .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 and B to be on the same line, like this one, not very elegant, I suggest using a column / grid structure to simplify the management of these types of elements.

you may have to decide how to handle overflow-x if you have content that exceeds 100px

you can try flexbox (as a bonus it tries to handle extra spaces 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>
+1
source 

 .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>
+1
source

As I understand it, your problem seems display: inline-block; in <span> ... try to remove this style and use the default value, which should be display: inline; ...

Although the range acts in an inline form, it also acts in block form, which means that it will collapse when there is no more accessible width for its parent, generating the specified empty space.

EDIT

Forgetting to mention ... also remove white-space: nowrap; ...

+1
source 
 .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>
+1
source

in class a, the default space value is normal, the browser ignores empty space, you can add a border to see!

0
source

More articles:


All Articles