I am making an application where tags can be added to posts, much like stackoverflow’s tagging system. I want to display a list of all common tags, each in a little box that fits the tag perfectly (like the <input type="submit"> tag stretches to fit the size of the word). How can I do this and have the <div>s align themselves horizontally with text-wrapping in their containing div? I.e. something like this, where each word has <div id="tag">:
tag1 thisisalongtag
biology physics
thiswordwraps science
one two three four
The easiest solution is to style the tag elements with
display: inline-block, which allows text-wrapping while preventing margin-collapsing.