请注意，下面的答案假设您想要
当我将h1标记中的文本缩小到平板电脑或移动模式下查看时，它会溢出div容器。有人能帮我一下吗。这就是它在常规窗口中的样子
这就是当我缩小窗口时发生的情况
这是代码！
.chicken {
width: 30%;
float: left;
background-color: #AAAAAA;
padding: 10px;
border: 3px solid black;
box-sizing: border-box;
margin-left: 40px;
position: relative;
}
.chickenh {
background-color: hotpink;
font-size: 20px;
display: inline;
position: relative;
left: 260px;
padding: 10px;
text-align: right;
border: 3px solid black;
box-sizing: border-box;
padding-left: 20px;
}
.chicken-info {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 17px;
font-weight: bold;
position: relative;
}<body>
<div class="chicken">
<h1 class="chickenh">
CHICKEN
</h1>
<p class="chicken-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</body>这是一种方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.chicken{
width:30%;
float: left;
background-color: #AAAAAA;
padding: 10px;
border:3px solid black;
box-sizing: border-box;
margin-left: 40px;
position: relative;
}
.chickenh{
background-color: hotpink;
font-size: 20px;
display: inline;
position: relative;
margin: -13px;
padding: 10px;
text-align: right;
border: 3px solid black;
box-sizing: border-box;
padding-left: 20px;
float: right;
}
.chicken-info{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 17px;
font-weight: bold;
float:right;
position: relative;
}
</style>
</head>
<body>
<div class="chicken">
<h1 class="chickenh">
CHICKEN
</h1>
<p class="chicken-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</body>
</html>请注意，下面的答案假设您想要.chickenwidth: 30%。如果你不想，那就把它做成width: 100%
只需去掉left:260px，添加width: 100%和text-align:center；
.chicken {
width: 30%;
float: left;
background-color: #AAAAAA;
padding: 10px;
border: 3px solid black;
box-sizing: border-box;
margin-left: 40px;
position: relative;
}
.chickenh {
background-color: hotpink;
font-size: 20px;
padding: 10px;
text-align: center;
width: 100%;
border: 3px solid black;
box-sizing: border-box;
padding-left: 20px;
}
.chicken-info {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 17px;
font-weight: bold;
position: relative;
}<div class="chicken">
<h1 class="chickenh">
CHICKEN
</h1>
<p class="chicken-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>如果您不想要width: 30%，请按照以下进行检查
.chicken {
float: left;
background-color: #AAAAAA;
padding: 10px;
border: 3px solid black;
box-sizing: border-box;
position: relative;
}
.chickenh {
background-color: hotpink;
font-size: 20px;
padding: 10px;
text-align: center;
width: 100%;
border: 3px solid black;
box-sizing: border-box;
padding-left: 20px;
}
.chicken-info {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 17px;
font-weight: bold;
position: relative;
}<div class="chicken">
<h1 class="chickenh">
CHICKEN
</h1>
<p class="chicken-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>