防止跨度元素包裹

Question

我的用户界面显示了骨干网检索的电子邮件地址列表。 当前将其渲染为包含span的span的span 。 这是一些典型的生成的html：

但是我在span s内遇到了中断（注意angelstwo的开头在两行上），可能是因为我使用了错误的html标记（ ul和li对于列表听起来更好）。 它看起来可能像这样：

我尝试了div但是每行只有一个条目，但我不想要这样。

我可以做些什么来使span s起作用吗？ 还是我应该换成ul和li类的东西？

Answer 1

默认情况下， span元素是内联元素。 在嵌入式格式中，上下文框可以包装。 （这就是文本环绕浮动图像时发生的情况。）

div元素默认情况下是块元素。 在块格式化上下文中，这些框将占据所有可用的水平空间（ width: 100% ）。

这就是为什么您的跨度和div无法按需工作的原因。

如果从display: inline切换到display: inline-block ，将获得类似于块级的行为，这将防止换行，但元素将与其他内联元素水平堆叠。

W3C参考：

• 9.2.2内联级元素和内联框
• 9.2.1块级元素和块框