Edit in JSFiddle

pre {
  color: white;
  width: 200px;
  padding: 0.8em;
  margin-bottom: 1.0em;
}

#alpha {
  background-color: red;
  background-image: -webkit-gradient( linear, left center,right center, from( red ), to( black ) );
  background-image: -moz-linear-gradient( 0deg, red, black );
}


#beta {
  white-space: pre-wrap;
  background-color: blue;
  background-image: -webkit-gradient( linear, left center,right center, from( blue ), to( black ) );
  background-image: -moz-linear-gradient( 0deg, blue, black );
}

<p>Code will overflow outside of container</p>

<pre id="alpha"><code>#alpha {
  background-color: red;
  background-image: -webkit-gradient( linear, left center,right center, from( red ), to( black ) );
  background-image: -moz-linear-gradient( 0deg, red, black );
}
</code></pre>

<p>Code will wrap inside container</p>

<pre id="beta"><code>#beta {
  white-space: pre-wrap;
  background-color: blue;
  background-image: -webkit-gradient( linear, left center,right center, from( blue ), to( black ) );
  background-image: -moz-linear-gradient( 0deg, blue, black );
}
</code></pre>