为什么响应式时间轴页面移动端文字不换行且内容被截断？

问题根因 #

• 移动端文字不换行、需要横向滚动：.timeline设置了固定宽度width: 1000px，小于1000px的设备上容器超宽，导致页面横向滚动，文字无法适配换行
• 文字截断、圆点被切：全局通配符*设置了overflow-x: hidden，所有元素默认隐藏横向溢出内容，时间轴圆点是绝对定位在li元素外部的，直接被裁剪；额外设置的.CV, .timeline { overflow-y:hidden }也会干扰内容正常显示

具体修改步骤 #

1. 调整全局溢出规则，不要给所有元素加横向溢出隐藏，仅给body设置即可，避免影响子元素的绝对定位内容：

/* 修改原*选择器的样式 */
*{
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    /* 删掉原有overflow-x: hidden; 代码 */
}
/* 新增body的溢出规则 */
body {
    overflow-x: hidden;
}

2. 修复时间轴的固定宽度问题，改为响应式宽度适配：

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    /* 把原有width: 1000px; 替换为下面两行 */
    width: 100%;
    max-width: 1000px;
}

3. 删除多余的溢出隐藏规则，避免内容被截断：

/* 直接删掉下面这行无效代码 */
/* .CV, .timeline { overflow-y:hidden; } */

4. 移动端补充文字自动换行规则，避免长内容溢出：

@media(max-width: 700px){
    /* 新增内容自动换行规则 */
    .content {
        word-wrap: break-word;
        word-break: break-all;
    }
    /* 原有媒体查询内的其他代码保持不变 */
}

5. 修复HTML标签缺失问题，避免渲染异常：你原有代码中第一个li标签未闭合、ul标签未闭合，补充并汉化后的完整HTML代码如下：

<section class="CV">
<div class="timeline">
    <ul>
        <li>
            <div class="content">
            <h3>交互设计研究生
            </h3>
            <h4>@普瑞特艺术学院<br>美国纽约州纽约市
            </h4>
            <p>交互体验设计硕士在读
            </p>
            </div>
            <div class="time">
                <p>2021年8月 - 至今
                </p>
            </div>
        </li>
        <li>
            <div class="content">
            <h3>行政助理兼英语第二语言教师
            </h3>
            <h4>@LeafCup英语咖啡馆&学校<br>日本东京
            </h4>
            <p>负责客户登记、薪资核算、语言水平测试、活动推广等工作<br><br>为大学生、职场人士、退休人群等不同群体提供小班英语听说能力辅导
            </p>
            </div>
            <div class="time">
                <p>2019年12月 - 2020年4月
                </p>
            </div>
        </li>
        <li>
            <div class="content">
            <h3>内容策划
            </h3>
            <h4>@TOKI<br>日本东京
            </h4>
            <p>负责行程搭建数据库的内容调研、编辑、生产，以及项目文本、网站内容的日译英工作
            </p>
            </div>
            <div class="time">
                <p>2019年11月 - 2019年12月
                </p>
            </div>
        </li>
    </ul>
    </div>
</section>

内容的提问来源于stack exchange，提问作者user17171254