防止跨度元素包裹

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塊級元素和塊框