节内的响应文本

Question

我在一个小节内有一个背景图像，图像上有一段文字。在我的屏幕上，它看起来很好，但我如何让文本做出响应并裁剪成多行。我使用position absolute将所有内容集中在屏幕上，因为我不知道该怎么做

#section-2 {
background-color: black;
height: 824px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: auto;
#pValues {
text-align: center;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
letter-spacing: 0.18em;
font-size: 4vh;
font-family: Poppins;
font-weight: bold;
}
ul.a {
list-style-type: circle;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffd400;
font-family: Boldfont;
}
.integrity {
position: absolute;
top: 25%;
left: 40%;
transform: translate(-50%, -50%);
color: #ffd400;
font-family: Boldfont;
text-transform: uppercase;
}

<section id="section-2">
<p id="pValues">ZOO'S VALUES</p>
<ul class="a">
<li>Integrity</li>
<li>Preservation</li>
<li>Safety</li>
</ul>
<p class="integrity">
Integrity<br>
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nisi eget orci molestie laoreet et vehicula.</em><br>
Preservation<br>
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nisi eget orci molestie laoreet et vehicula.</em><br>
Safety <br>
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nisi eget orci molestie laoreet et vehicula.</em>
</p>  
</section>

Answer 1

我已经更新了您的HTML, CSS。我希望这会有所帮助。

#section-2 {
background-color: black;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
#pValues {
color: white;
letter-spacing: 0.18em;
font-size: 4vh;
font-family: Poppins;
font-weight: bold;
}
ul.a {
list-style-type: circle;
color: #ffd400;
font-family: Boldfont;
}
#integrity-div {
width: 100%;
display: flex;
justify-content: center;
}
.integrity {
color: #ffd400;
font-family: Boldfont;
text-transform: uppercase;
padding: 20px;
}

<div id="section-2">
<p id="pValues">ZOO'S VALUES</p>
<ul class="a">
<li>Integrity</li>
<li>Preservation</li>
<li>Safety</li>
</ul>
<div id="integrity-div">
<div class="integrity">
<div>Integrity</div>
<div>
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nisi eget orci molestie laoreet et vehicula.</em>
</div>
<div>Preservation</div>
<div>
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nisi eget orci molestie laoreet et vehicula.</em>
</div>
<div>Safety</div>
<div>
<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nisi eget orci molestie laoreet et vehicula.</em>
</div>
</div>
</div>

</div>