如何让 Span 标签换行时自动添加 margin-top 值？

CSS 或 JavaScript 中判断 Span 标签是否换行

当 Span 标签从第一行换行到第二行时，如何自动添加 margin-top 值？

问题解析

在提供的代码中，Span 标签展示搜索历史，但第二行的标签与第一行的标签紧贴在一起。用户希望当 Span 标签换行到第二行时，自动为其添加 margin-top 值。

解决方案

直接在 Span 标签上添加 margin-bottom 即可。

为了避免第二行开始的 Span 标签左侧出现空白，可以将 margin-left 更改为 margin-right，但需要注意考虑最后一项内容的宽度和 margin-right 设置是否会溢出而导致换行。

flex 布局优化

如果使用 flex 布局，可以使用 gap 属性设置子项间的间隔。这是一种更优雅的解决方案，具体使用可以参考笔记《在 Flex 布局中使用 gap 属性》。

以上就是如何让 Span 标签换行时自动添加 margin-top 值？的详细内容，更多请关注其它相关文章！