css-多条记录，自动换行与自动并行布局及gap兼容

实现这样的内容布局，当一段文案长度超过当前行的时候自动占据一行，其他相近的不超过一行自动放在一行间隔隔开

关键实现原理：

1. 弹性布局容器：

   .history-container {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
   }
   

   • 使用flex-wrap: wrap允许项目自动换行
   • gap属性设置项目之间的间距

2. 单行文本处理：

   .history-item {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   

   • 默认单行显示，超出部分显示省略号

3. 多行文本处理：

   .history-item.multi-line {
       white-space: normal;
       word-break: break-all;
   }
   

   • 当添加.multi-line类时，文本自动换行
   • word-break: break-all允许在任意字符间断行

4. 智能换行判断：

   document.querySelectorAll('.history-item').forEach(item => {
       if (item.textContent.length > 20) {
           item.classList.add('multi-line');
       }
   });
   

   • 通过JS自动检测文本长度，超过阈值(20字符)时添加多行样式

5. 响应式设计：

   • 容器使用max-width: 600px限制最大宽度
   • 项目使用max-width: 100%防止溢出
   • 使用相对单位(px)确保布局稳定

当gap不被识别

浏览器兼容性对比

实现

方案1：使用 margin 替代 gap

.history-container {
  display: flex;
  flex-wrap: wrap;
  /* 移除 gap: 12px; */
  margin: -6px; /* 负边距抵消子元素边距 */
}

.history-item {
  margin: 6px; /* 替代 gap */
}

方案2：使用 padding + margin 组合

.history-container {
  display: flex;
  flex-wrap: wrap;
  padding: 6px; /* 容器内边距 */
}

.history-item {
  margin: 6px; /* 项目外边距 */
}

方案3：使用 CSS Grid + margin

.history-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 使用 margin 替代 gap */
}

.history-item {
  margin: 6px;
}