Javascript 如何防止此文本与背景重叠？

当我的网站处于正常视图时，它看起来像

但是，当浏览器窗口的宽度缩小时，将显示。仅供参考，这不是移动视图，这仍然是宽度较小的桌面视图

---

code:

您应该添加

空白：行前

以打断代码部分内的空格

选项1：使代码文本换行：

#codebox > pre{
   white-space: pre-wrap;
}

@导入url(https://fonts.googleapis.com/css?family=Roboto:500);
.编码箱{
垫顶：20vh；
}
#密码箱{
填充：15px；
字体系列：信使，无衬线；
字体大小：13px；
颜色：#fff；
背景色：#3d3D；
-webkit边界半径：0px 0px 6px 6px；
-moz边界半径：0px 0px 6px 6px；
边界半径：0px 0px 6px 6px；
边缘底部：10px；
}
.codeheader{
填充物：5px 5px 5px 10px；
字体系列：“Roboto”，无衬线；
字体大小：16px；
颜色：#fff；
-webkit边界半径：6px 6px 0px 0px；
-moz边界半径：6px 6px 0px 0px；
边界半径：6px 6px 0px 0px；
}
#码头{
背景色：#CD3333；
}
#代码盒>预处理{
空白：预包装；
}

代码

form name=“contact”
P
labelName输入类型=“text”name=“name”/>/label
/p
P
labelEmail输入类型=“email”name=“email”/>/label
/p
P
按钮类型=“提交”>发送/按钮
/p
/形式

---

您需要在此处显示您的代码，而不是正在发生的事情的图像。您希望它做什么？您的父容器代码是什么？或者只是提供一个代码笔。@Mason我希望灰色和红色部分延伸，但如果宽度太短，则将文本切掉，以确保没有垂直部分sidebar@5Flux使用

溢出-x：隐藏编辑：等等，我想我误解了你的意思，你想让文本环绕并使容器更高吗？或者也许所有这些都会将文本折叠到下一行，从而破坏代码框的效果