title: css word wrap that wraps whole word without breaking them?
body: <p>I need to fit a long text to a width of about 300 pixels. I'm using this <code>css</code>: </p>
  
  <pre><code> div {      
        width: 300px;
        color:white;
        word-wrap:break-word;
        }
  </code></pre>
  
  <p>My issue is with the <code>word-wrap:break-word;</code>. It's breaking words in the middle of the word. But what I need is to have the words stay as they are, and for the document to be smart enough to break the line when appropriate, and keep the words themselves intact. </p>
  
  <p>Is that possible? I tried every option of <code>word-wrap</code> but nothing works. Either the paragraphs are not breaking and the text stays off screen, or the words break and a couple of letters are in one line, while other letters are in the following line. </p>
  
  <p>EDIT: adding my code to form a concrete example. My entire <code>style</code> element: </p>
  
  <pre><code>&lt;style type="text/css"&gt;
      p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
      p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}
  
  div {
      width: 300px;
      color:white;
      font-size:10px;
      word-wrap:break-word;
  }
  
  pre {white-space:break;}
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Then in the <code>body</code> element: </p>
  
  <pre><code>&lt;body bgcolor="#1fa0e2"&gt;
  &lt;p class="p1"&gt;
  &lt;div&gt;
  &lt;bdo dir="rtl"&gt;
  &lt;pre&gt;
      דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.
  
  &lt;/pre&gt;
  &lt;/div&gt;
  &lt;/bdo&gt;
  &lt;span class="Apple-converted-space"&gt; &lt;/span&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>