title: Is there a CSS solution for removing spaces for non-space using languages?
body: <p>Some languages don't use space. Japanese for example.</p>
  
  <p>A typical paragraph might look like this (taken from <a href="https://ja.wikipedia.org/wiki/Stack_Overflow" rel="nofollow noreferrer">the Japanese Wikipedia article on Stack Overflow</a>)</p>
  
  <blockquote>
    <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&amp;Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。</p>
  </blockquote>
  
  <p>Even though there are 3 sentences in the paragraph above the only space in inside <code>Stack Overflow</code>.</p>
  
  <p>So there's the issue. Japanese users generally don't write long sentences and paragraphs with no breaks. To write the paragraph above most people would not write.</p>
  
  <pre><code>&lt;p&gt;本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&amp;Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。&lt;/p&gt;
  </code></pre>
  
  <p>They'd write something more along the lines of</p>
  
  <pre><code>&lt;p&gt;
  本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。
  ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の
  編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは
  良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは
  伝統的なQ&amp;Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザに
  よる記述内容はクリエイティブ・コモンズライセンス下にある。
  &lt;/p&gt;
  </code></pre>
  
  <p>Which unfortunately becomes this</p>
  
  <p><a href="https://i.stack.imgur.com/69JXW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/69JXW.png" alt="unwanted gaps"></a></p>
  
  <p>With all these unwanted gaps</p>
  
  <p>The only solution I can think of requires JavaScript to go through and remove spaces between Japanese characters and any other character at display time or by adding a build step.</p>
  
  <p>Is there a CSS only solution?</p>
  
  <p>Here's a live sample: The first paragraph is one long hard to edit line. The 2nd paragraph has the line breaks in it</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
  本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&amp;Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。
  &lt;/p&gt;
  
  
  &lt;p&gt;
  本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。
  ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の
  編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは
  良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは
  伝統的なQ&amp;Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザに
  よる記述内容はクリエイティブ・コモンズライセンス下にある。
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here are screenshots to show the difference.</p>
  
  <p>1st paragraph with no breaks in HTML</p>
  
  <p><a href="https://i.stack.imgur.com/NZpTd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NZpTd.png" alt="no breaks"></a></p>
  
  <p>2nd with</p>
  
  <p><a href="https://i.stack.imgur.com/zSLYy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zSLYy.png" alt="breaks"></a></p>
  
  <p>Also note that whatever solution it should not collapse the space in <code>Stack Overflow</code></p>