title: SyntaxHighlighter word wrap?
body: <p>I used syntaxhighlighter in my front web page to highlight code. But I came across a question that the word in the code isn't wrapped when the code length is longer than the length of the <code>&lt;div&gt;</code>.
  <img src="https://i.stack.imgur.com/0uZxu.png" alt="enter image description here"></p>
  
  <p>then I googled it. And found a way mentioned below:</p>
  
  <pre><code>pre,code{ 
  white-space:pre-wrap;/*css-3*/ 
  white-space:-moz-pre-wrap;/*Mozilla,since1999*/ 
  white-space:-pre-wrap;/*Opera4-6*/ 
  white-space:-o-pre-wrap;/*Opera7*/ 
  word-wrap:break-word;/*InternetExplorer5.5+*/　　
  } 
  </code></pre>
  
  <p>However, a new problem appeared, the line number is not corresponding to the actual code line：
  <img src="https://i.stack.imgur.com/6JLaJ.png" alt="enter image description here"></p>
  
  <p>My question is:</p>
  
  <ul>
  <li><strong>How can I avoid the code overflows while keep the code line be corresponding to the actual original code line?</strong></li>
  </ul>