我对HTML和CSS非常陌生，我正在尝试为一项任务创建一个小型网站。我还没走多远，而且我在文本包装方面遇到了麻烦。
文本的第一行看起来很棒，我使用了20像素的填充在窗口边缘和文本本身之间添加了一个缓冲区。当窗口小于文本长度时，问题就出现了。当文本换行到下一行时，它不符合页边空白，我不太确定如何解决这个问题，也不确定如何在搜索查询中输入单词来尝试解决它。
以下是该问题的屏幕截图：文本换行问题。
这是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/bootstrap@4.5.3/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/bootstrap@4.5.3/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>