移动端视图下文本覆盖盒子，如何正确实现Media Query适配

原代码出现移动端文本覆盖盒子的问题，核心是几个语法错误和布局逻辑冲突：

• HTML结构混乱：.doi_tuong起始标签缺少闭合尖括号，</body>错误嵌套在盒子内部，浏览器解析布局完全错位
• 文本脱离文档流：未被使用的.text-doi_类写了position: absolute属性，会让文本不受父盒子边界约束，直接溢出覆盖
• 尺寸设置僵化：父盒子固定写死height:70px，搭配固定25px字号、3rem内边距，窄屏移动端没有适配空间，文本直接撑出盒子
• 基础属性错误：body高度写为00vh实际高度为0，无法正常实现居中效果

CSS部分 #

/* 全局盒模型修正，避免内边距额外撑大盒子 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  align-items: center;
  background-color: black;
  display: flex;
  min-height: 100vh; /* 修正原00vh错误，占满整个视口高度 */
  justify-content: center;
  padding: 1rem; /* 移动端预留边距，避免盒子贴屏幕边缘 */
}

.doi_tuong{
  align-items: center;
  border-radius: 25px;
  background: #121212;
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset, -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset, -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  display: flex;
  min-height: 70px; /* 替换固定高度，文本变长时盒子可自动撑开 */
  justify-content: center;
  padding: 1.5rem 2rem; /* 调整内边距，预留合适的文本呼吸空间 */
  text-align: center;
  width: 100%;
  max-width: 90vw; /* 限制盒子最大宽度不超过视口90% */
  transition: all 0.3s ease;
}

.doi_tuong:hover {
    transform: scale(1.05, 1.05);
}

.doi_tuong font {
  color: white;
  /* 响应式字号：无需单独写媒体查询，自动适配不同屏幕，最小16px、最大25px */
  font-size: clamp(16px, 5vw, 25px);
  line-height: 1.4; /* 多行文本增加行高，避免文字挤在一起 */
  word-break: break-word; /* 长文本自动换行，不会溢出盒子边界 */
}

HTML部分 #

<div class="doi_tuong">
  <p>
    <font>Lorem et ipsum Lorem et ipsum</font>
  </p>
</div>

• 删掉了错误的绝对定位属性，让文本回归正常文档流，完全受父盒子约束
• 移除父盒子固定高度限制，用最小高度保证基础样式的同时，可适配任意长度的文本内容
• 用clamp()实现自适应字号，不需要额外写多套媒体查询规则，就能在手机、平板、PC端自动匹配合适的字体大小
• 增加长文本自动换行规则，即使是无空格的长字符串也不会溢出盒子
• 修正所有HTML语法错误，补全缺失的标签尖括号，移除错误嵌套的闭合标签

内容的提问来源于stack exchange，提问作者user19244147