為什么我的文字不換行并被切斷？-有解無憂

我是編碼新手，我正在嘗試制作一個帶有時間線的回應式網站，但是，由于某種原因，文本不會在移動版本上換行，因此您必須水平滾動才能閱讀所有內容。當我添加溢位-x 時，它會切斷文本并將時間軸上的點切成兩半。有人可以檢查我的代碼并告訴我如何解決這個問題嗎？謝謝！

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
        overflow-x: hidden;
}
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}

.timeline ul{
    margin: 0;
    padding:0;
}

.timeline ul li{
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}

.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}

.content{
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 28px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #f44336;
}

.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}

.time{
    color: #808080;
}

.CV, .timeline {
    overflow-y:hidden;
}

@media(max-width: 700px){
    .sub-header{
        height: 35vh!important;
    }
    .timeline:before{
        left: 20px;
    }
    .timeline ul li{
    width: 100%;
    padding-left: 50px;
    padding-right: 25px;
    }
    .timeline ul li:nth-child(odd){
    float: right;
    text-align: left;
    clear: both;
    }
    .timeline ul li:nth-child(even):before{
    left: 16px;
    z-index: 1;
    }
    .timeline ul li:nth-child(odd):before{
    left: 16px;
    z-index: 1;
    }
    
    .content h3{
        font-size: 14px;
    }
    .content h4{
        font-size: 14px;
    }
    .content p{
        font-size: 14px;
    }
    .time p{
        font-size: 14px;
    }
}

<section class="CV">
<div class="timeline">
    <ul>
        <li>
            <div class="content">
            <h3>IXD Graduate Student
            </h3>
            <h4>@Pratt Institute<br>New York City, NY, United States
            </h4>
            <p>M.S. Interaction Experience Design
            </p>
            </div>
            <div class="time">
                <p>Aug 2021 - present
                </p>
            </div>
      <li>
            <div class="content">
            <h3>Administrative Assistant &<br>English Second Language Teacher
            </h3>
            <h4>@LeafCup English Cafe and School<br>Tokyo, Japan
            </h4>
            <p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
            </p>
            </div>
            <div class="time">
                <p>Dec 2019 - Apr 2020
                </p>
            </div>
        </li>
        <li>
            <div class="content">
            <h3>Content Curator
            </h3>
            <h4>@TOKI<br>Tokyo, Japan
            </h4>
            <p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
            </p>
            </div>
            <div class="time">
                <p>Nov 2019 - Dec 2019
                </p>
            </div>
        </li>
    </div>

</section>

uj5u.com熱心網友回復：

可能是由于overflow-x:hidden;文本被剪裁了；所以你可以嘗試洗掉它。

*{
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans', sans-serif;
   overflow-x: hidden;
}

uj5u.com熱心網友回復：

改變timeline width:100%而不是1000px

*{
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
        overflow-x: hidden;
}
.CV{
    width: 80%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 50px;
}

.timeline{
    position: relative;
    margin: 50px auto;
    padding: 40px 0;
    width:100%;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #c5c5c5;
}

.timeline ul{
    margin: 0;
    padding:0;
}

.timeline ul li{
    list-style: none;
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.timeline ul li:nth-child(odd){
    float: left;
    text-align: right;
    clear: both;
}

.timeline ul li:nth-child(even){
    float: right;
    text-align: left;
    clear: both;
}

.content{
    padding-bottom: 20px;
}

.timeline ul li:nth-child(odd):before{
    content: '';
    position: absolute;
    top: 24px;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li:nth-child(even):before{
    content: '';
    position: absolute;
    top: 28px;
    left: -4px;
    width: 10px;
    height: 10px;
    background: #f44336;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 204, 200, 1);
}

.timeline ul li h3{
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #f44336;
}

.timeline ul li p{
    margin: 10px 0 0;
    padding: 0;
}

.time{
    color: #808080;
}

.CV, .timeline {
    overflow-y:hidden;
}

@media(max-width: 700px){
    .sub-header{
        height: 35vh!important;
    }
    .timeline:before{
        left: 20px;
    }
    .timeline ul li{
    width: 100%;
    padding-left: 50px;
    padding-right: 25px;
    }
    .timeline ul li:nth-child(odd){
    float: right;
    text-align: left;
    clear: both;
    }
    .timeline ul li:nth-child(even):before{
    left: 16px;
    z-index: 1;
    }
    .timeline ul li:nth-child(odd):before{
    left: 16px;
    z-index: 1;
    }
    
    .content h3{
        font-size: 14px;
    }
    .content h4{
        font-size: 14px;
    }
    .content p{
        font-size: 14px;
    }
    .time p{
        font-size: 14px;
    }
}

<section class="CV">
<div class="timeline">
    <ul>
        <li>
            <div class="content">
            <h3>IXD Graduate Student
            </h3>
            <h4>@Pratt Institute<br>New York City, NY, United States
            </h4>
            <p>M.S. Interaction Experience Design
            </p>
            </div>
            <div class="time">
                <p>Aug 2021 - present
                </p>
            </div>
      <li>
            <div class="content">
            <h3>Administrative Assistant &<br>English Second Language Teacher
            </h3>
            <h4>@LeafCup English Cafe and School<br>Tokyo, Japan
            </h4>
            <p> Checked-in customers, handled payroll activities, conducted language proficiency tests, and advertised events and promotions<br><br>Facilitated small group discussions with university students, businesspersons, retirees, etc. to develop basic speaking/listening English skills
            </p>
            </div>
            <div class="time">
                <p>Dec 2019 - Apr 2020
                </p>
            </div>
        </li>
        <li>
            <div class="content">
            <h3>Content Curator
            </h3>
            <h4>@TOKI<br>Tokyo, Japan
            </h4>
            <p>Researched, edited, and built content for the Itinerary Builder database and translated text projects and website content from Japanese to English
            </p>
            </div>
            <div class="time">
                <p>Nov 2019 - Dec 2019
                </p>
            </div>
        </li>
    </div>

</section>

uj5u.com熱心網友回復：

不要給.timeline寬度，因為 div 已經width: 100%;從 css 中洗掉了這個寬度

uj5u.com熱心網友回復：

洗掉{ overflow:hidden; } from * 并替換.timeline { width:1000px; }樣式.timeline{ width:100%; }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326577.html

標籤：html css 溢出自动换行

上一篇：僅當p是父母的第一個孩子時，如何定位p的第一個字母？

下一篇：我的導航欄內容彼此合并