时间轴结构应使用，因其语义上准确表达有序事件流；实际开发中可用配合CSS清除默认样式，但须确保可访问性与逻辑顺序一致。
时间轴结构用 <ol></ol> 还是 <ul></ul>？
语义上，时间轴是**有顺序的事件列表**，<ol></ol> 更准确。但实际开发中很多人用 <ul></ul> 避免默认序号干扰样式，这没问题——关键是用 CSS 清掉 list-style 并手动控制视觉序号（比如用伪元素或图标）。别硬套语义而让样式变复杂。
响应式时间轴的核心不是“怎么画线”，而是“如何让节点在小屏不重叠、不溢出、可读”。常见错误是直接给 .timeline-item 设固定宽度或 float，结果在手机上挤成一团或文字折行错乱。
移动端时间轴怎么避免左右滚动？
根本原因是水平方向内容过宽。典型诱因有：
- 给时间轴容器设了
min-width 或固定 width
- 用
display: flex 但没加 flex-wrap: wrap，且子项用了 white-space: nowrap
- 时间点（如
2023-05）和标题并排显示，小屏下没做堆叠
min-width 或固定 width
display: flex 但没加 flex-wrap: wrap，且子项用了 white-space: nowrap
2023-05）和标题并排显示，小屏下没做堆叠推荐做法：小屏下把每个 .timeline-item 改为垂直堆叠，时间点放顶部居中，内容块占满宽度。用媒体查询切换布局：
@media (max-width: 768px) {
.timeline-item {
flex-direction: column;
}
.timeline-date {
text-align: center;
margin-bottom: 0.5rem;
}
}
position: absolute 布局时间轴线容易翻车吗？
非常容易。常见问题包括：
- 父容器没设
position: relative，导致时间线定位漂移
- 绝对定位的竖线高度写死（如
height: 300px），内容增减后断裂或遮挡
- 响应式时没重置
top/left，小屏下线偏出视口
position: relative，导致时间线定位漂移height: 300px），内容增减后断裂或遮挡top/left，小屏下线偏出视口更稳的做法是用 CSS Grid 或 Flex 搭建骨架，用伪元素画线：
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 2px;
background: #e0e0e0;
}
注意：left: 50% + transform 是为了精准居中，别只写 left: 50% 后忘记偏移修正。
怎么让时间轴支持不同长度的描述文本？
关键在弹性容器和文字截断策略。别给 .timeline-content 设固定 height，否则长文本被裁掉。
- 用
overflow: hidden + text-overflow: ellipsis 只适用于单行，且必须配合 white-space: nowrap 和固定宽度
- 多行截断可用
-webkit-line-clamp（仅 WebKit 内核），但 iOS Safari 支持不稳定
- 最可靠的是不限制高度，靠 padding 和 max-width 控制呼吸感；长文本自然换行，靠行高和字间距保持可读性
overflow: hidden + text-overflow: ellipsis 只适用于单行，且必须配合 white-space: nowrap 和固定宽度-webkit-line-clamp（仅 WebKit 内核），但 iOS Safari 支持不稳定字体大小建议用 rem，配合根元素动态调整，比纯 px 更适应响应式缩放。
立即学习“前端免费学习笔记（深入）”；
时间轴最难调的永远不是“怎么画出来”，而是“内容长度不确定 + 屏幕尺寸不确定”下的对齐与留白平衡。尤其是日期标签的宽度变化（“2024-Q3” vs “Jan 2024”）会悄悄破坏整条轴的节奏，得预留弹性空间。
