Html 防止跨图元缠绕

我的UI显示主干网检索到的电子邮件地址列表。它当前呈现为包含

span

s的

span

的

span

。以下是一些典型的生成html：

但是我在

span

s中得到了中断（注意angelstwo的开头在两行上），可能是因为我使用了错误的html标记（

ul

和

li

对于列表来说听起来更好）。它可以是这样的：

我尝试了

div

s，但我每行有一个条目，我不想这样

---

我可以做些什么来让

span

s发挥作用吗？或者我是否应该改为其他类似

ul

和

li

？

span

元素在默认情况下是内联元素。在内联格式中，上下文框可以换行。（这是文字环绕浮动图像时发生的情况。）

div

元素在默认情况下是块元素。在块格式上下文中，框将占据所有可用的水平空间（

宽度：100%

）

这就是为什么您的跨距和div不能按您所希望的方式工作

如果从

display:inline

切换到

display:inline block

，将获得类似块级别的行为，这将阻止换行框，但元素将与其他内联元素水平堆叠

W3C参考资料：

---

默认情况下，元素是内联元素。在内联格式中，上下文框可以换行。（这是文字环绕浮动图像时发生的情况。）

div

元素在默认情况下是块元素。在块格式上下文中，框将占据所有可用的水平空间（

宽度：100%

）
这就是为什么您的跨距和div不能按您所希望的方式工作
如果从

display:inline

切换到

display:inline block

，将获得类似块级别的行为，这将阻止换行框，但元素将与其他内联元素水平堆叠
W3C参考资料：