Mark Kasson Mark Kasson - 6 months ago 13
HTML Question

Prevent span elements from wrapping

My UI shows a list of email addresses retrieved by backbone. It is currently rendered as a

span
of
span
s that contain
span
s. Here's some typical generated html:

enter image description here

But I am getting breaks inside the
span
s (notice the beginning of angelstwo is on two lines), probably because I am using the wrong html tags (
ul
and
li
sounds better for a list). It can look like this:

enter image description here

I tried
div
s but I got one entry per line and I don't want that.

Is there something I can do to make this work with
span
s? Or should I change to something else like
ul
and
li
?

Answer

span elements are, by default, inline elements. In an inline formatting context boxes can wrap. (This is what happens to text when it wraps around a floated image.)

div elements are, by default, block elements. In a block formatting context the boxes will occupy all available horizontal space (width: 100%).

This is why your spans and divs aren't working as you want.

If you switch from display: inline to display: inline-block, you'll get block-level like behavior, which will prevent wrapping line boxes, but elements will stack horizontally with other inline elements.

W3C References:

Comments