防止跨度元素包裹

Question

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:

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:

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 1

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:

• 9.2.2 Inline-level elements and inline boxes
• 9.2.1 Block-level elements and block boxes