html - Make Label + Input move to next line together if input overflows

Question

I have a menubar that looks like this

#label1 #input1 #label2 #input2 #label3 #input3

Now let's say that I run out of space on my window, I need them to move to the next line together so I get this:

#label1 #input1 #label2 #input2

#label3 #input3

instead of

#label1 #input1 #label2 #input2 #label3

#input3

I was able to get every label input pair to move together by writing this

<span style="white-space: nowrap"><label...><input...></span>

The problem though is that the label3 and input3 pair won't wrap to the next line until label3 is completely cut off by the browser window (until that happens I get a scroll bar). I want it so that if input3 gets slightly cut off, label3 and input3 move onto the next line immediately.

Answer 1

西迪基的想法是正确的。您可以使用<wbr>标签来指示您希望换行符出现的位置。示例：http: //jsfiddle.net/VNenK/

关于 wbr 的更多信息：http ://www.quirksmode.org/oddsandends/wbr.html