title: Word wrap with continuous dot(.) using css
body: <p>I am trying to do wordwrap with any kind of characters using <code>css</code>. </p>
  
  <p>Here is the <code>css</code> what i am using</p>
  
  <pre><code>.wordbreak {
      white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
      white-space: -webkit-pre-wrap; /*Chrome &amp; Safari */ 
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      white-space: pre-wrap;       /* css-3 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
      word-break: break-all;
      white-space: normal;
  }
  </code></pre>
  
  <p>Somehow word wrap doesn't work with continuous dot(.), see this codepen <a href="https://codepen.io/nikhilexe/pen/QZMjOB" rel="nofollow noreferrer">link</a> </p>
  
  <p>In this example you see a lot of dots without any whitespace characters in between. They do not break at the window's edge hence leading to a horizontal scrollbar. After that is a looooong word without any whitespace characters in between and this breaks at the edge of the window as expected.</p>
  
  <p>Why don't the dots break at the window's edge?<br>
  Can I solve this in CSS alone?<br>
  Is there a workaround, maybe in JavaScript?  </p>