如何阻止此文本与背景重叠?

Question

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

但是，当浏览器窗口的宽度缩小时，会出现这种情况。仅供参考，这不是移动视图，这仍然是宽度较小的桌面视图。

Code:https://jsfiddle.net/y5cr1d84/

Answer 1

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

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

@import url(https://fonts.googleapis.com/css?family=Roboto:500);
.codingbox {
padding-top: 20vh;
}
#codebox {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 13px;
color: #fff;
background-color: #3d3d3d;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
}
.codeheader {
padding: 5px 5px 5px 10px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #fff;
-webkit-border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
#codeheader {
background-color: #CD3333;
}
#codebox > pre{
white-space: pre-wrap;
}

<div class>
<div class="codingbox">
<div class="codeheader" id="codeheader">Code</div>
<div id="codebox">
<pre><code data-language="css">
&lt;form name="contact"&gt;
&lt;p&gt;
&lt;label&gt;Name &lt;input type="text" name="name" />&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Email &lt;input type="email" name="email" />&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;button type="submit">Send&lt;/button&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>

选项 2：为容器指定固定宽度：

.codingbox {
width: 450px;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:500);
.codingbox {
padding-top: 20vh;
}
#codebox {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 13px;
color: #fff;
background-color: #3d3d3d;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
}
.codeheader {
padding: 5px 5px 5px 10px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #fff;
-webkit-border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
#codeheader {
background-color: #CD3333;
}
#codebox>pre {
white-space: pre-wrap;
}
.codingbox {
width: 450px;
}

<div class>
<div class="codingbox">
<div class="codeheader" id="codeheader">Code</div>
<div id="codebox">
<pre><code data-language="css">
&lt;form name="contact"&gt;
&lt;p&gt;
&lt;label&gt;Name &lt;input type="text" name="name" />&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label&gt;Email &lt;input type="email" name="email" />&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;button type="submit">Send&lt;/button&gt;
&lt;/p&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>

Answer 2

您应该添加white-space: pre-line来打破代码部分内的空格。 https://jsfiddle.net/z1f8rb56/