title: CSS - Only wrap text between elements, NOT characters (can't use a space)
body: <p>Let's say I have a few <code>&lt;span&gt;</code> elements like this, with no spaces between the elements:</p>
  
  <pre><code>&lt;span&gt;aaaaaaaaaa&lt;/span&gt;&lt;span&gt;bbbbbbbbbb&lt;/span&gt;&lt;span&gt;cccccccccc&lt;/span&gt;
  </code></pre>
  
  <p>When rendered in a browser, and is being horizontally "squished", I would like the text to wrap ONLY between elements. So, only the first two examples should be allowed:</p>
  
  <p><strong>1. &#10004; No wrapping:</strong></p>
  
  <pre><code>aaaaaaaaaabbbbbbbbbbcccccccccc
  </code></pre>
  
  <p><strong>2. &#10004; Element-only wrapping:</strong></p>
  
  <pre><code>aaaaaaaaaa
  bbbbbbbbbb
  cccccccccc
  </code></pre>
  
  <p><strong>3. &#10060; Character wrapping (this must not be allowed):</strong></p>
  
  <pre><code>aaaaaaaa
  aabbbbbb
  bbbbcccc
  cccccc
  </code></pre>
  
  <p>How do I prevent the characters from wrapping in CSS? Normally I'd put a space between the elements to get them to wrap properly, but I can't use spaces in this specific case. I've tried the following, but characters still wrap with this (in Firefox, at least):</p>
  
  <pre><code>&lt;style&gt;
  .b{
  word-break:break-all;
  }
  .n{
  word-break:normal;
  }
  &lt;/style&gt;
  
  &lt;span class="b"&gt;&lt;span class="n"&gt;aaaaaaaaaa&lt;/span&gt;&lt;span class="n"&gt;bbbbbbbbbb&lt;/span&gt;&lt;span class="n"&gt;cccccccccc&lt;/span&gt;&lt;/span&gt;
  </code></pre>