我对 HTML 和 CSS 非常陌生，我正在尝试制作一个小型网站来完成作业。我还没有走得太远，而且我在文本换行方面遇到了麻烦。
文本的第一行看起来很棒，我使用了 20px 填充在窗口边缘和文本之间添加了一个缓冲区。当窗口小于文本长度时就会出现问题。当文本换行到下一行时，它不遵守边距，我不太确定如何解决此问题或如何编写搜索查询来尝试修复它。
问题截图如下： 文本换行问题。
这是CSS：
body {
color: white;
background-color: #131516}
.headerblock {
padding: 10px;
background-color: black;
margin-top: 0px;
margin-left: 0px;
color: #5b5b5b;
font-size: 30px;
transition: 0.2s;
box-sizing: border-box;
text-align: center;
width: 100%;
}
.headerblock:hover{
color: white;
transition: 0.2s;
}
help {
padding: 20px;
word-break: normal;
width: fit-content;
}
这是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>-----------------</title>
</head>
<div class="headerblock">
DEEZ NUTZ
</div>
<body>
<help>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</help>
</body>
</html>
提前致谢！
你只需要稍微改变你的CSS，因为当你的文本转到下一行进行屏幕大小调整时，它无法获取padding=20px的属性；所以，你只需要添加显示柔性。
help {
display:flex;
padding-left: 20px;
word-break: normal;
}
您选择使用 Flexbox 的原因是您希望将一组项目按一个方向或另一个方向放置。当您布局项目时，您想要控制该一维中项目的尺寸或控制项目之间的间距
保持文本整洁并包裹在元素内的最佳方法是使用
<p>.help {
padding: 20px;
}<p class='help'>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</p>如果
word-wraptext-wrap: pretty;