如何防止<pre> tags from splitting on the edge?

Question

pre {
  white-space: pre-wrap;
  /* CSS 3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */
  overflow: auto;
  width: 500px;
  font-size: 14px;
  position: relative;
  color: #595959;
  padding: 10px 10px 10px;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.42857143;
  background: white;
}

 <pre>This is a test of a longer comment that continues to take up more space than a smaller comment [enter]</pre>

Here is an example of what's happening

Is there a way to prevent a word (in this example: "than") from being split on the edge of the <pre>'s set width of 500px?

Also, is there a way to make a <pre> tag responsive to the resizing of a table? (this <pre> tag resides in a <td> of a <table>)

Answer 1

Remove word-wrap: break-word; and word-break: break-all; (if you use that too)

table {
  width: 60%;
}
td {
  border: 1px solid;
}
pre {
  white-space: pre-wrap;
  /* CSS 3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  overflow: auto;
  font-size: 14px;
  position: relative;
  color: #595959;
  padding: 10px 10px 10px;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.42857143;
  background: white;
}

<table>
  <tr>
    <td>      
      <pre>This is a test of a longer comment that continues to take up more space than a smaller comment [enter]</pre>
    </td>
  </tr>
</table>