Is there a CSS solution to remove spaces for non-space using languages?

Some languages ​​do not use space. Japanese for example.

A typical paragraph might look like this (taken from a Japanese Wikipedia article on stack overflow )

本 サ ー ビ ス は コ ン ピ ュ ー タ · プ ロ グ ラ ミ ン グ の 広 範 囲 な ト ピ ッ ク を 扱 っ て い る こ と が 特色 で あ る. ウ ェ ブ サ イ ト は 質問 と 回答 を 行 う 機能, ま た そ れ ら に 対 す る 評 価 付 け, wiki や Digg に 似 た 文書 の 編 集 機能 を 備 え て お り, ユ ー ー ー ーの 活 発 な 参加 を 促 し て い る .Stack Overflow の ユ ー ザ は 良 質 な 回答 を 行 う こ と に よ っ て 評 価 ポ イ ン ト や 「ッ ッ ヂ を と 得 る る る る る る るが で き, 本 サ ー ビ ス は 伝 統 的 な Q & amp, A サ イ ト · フ ォ ー ラ ム に ゲ ー ミ フ ィ ケ ー シ ョ ン を 施 し た も の ​​と 言 える. 全 て の ユ ー ザ に よ る 記述 内容 は ク リ エ イ テ ィ ブ · コ モ ン ズ ラ イ セ ン ス 下 に あ る.

Despite the fact that in the paragraph above there are 3 sentences, the only space inside Stack Overflow .

So the problem. Japanese users usually do not write long sentences and paragraphs without interruptions. To write the paragraph above, most people will not write.

 <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。</p> 

They will write something more line by line

 <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> 

Unfortunately, that means

unwanted spaces

With all these unwanted spaces

The only solution I can think of is requiring JavaScript to look at and remove spaces between Japanese characters and any other character while displaying or adding a build step.

Is there a CSS-only solution?

Here's a living example: the first paragraph is a long line for editing. The second paragraph has line breaks in it

 <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> ピュータ·プログラミングの広範囲なトピックを扱っていることが特色である.ウェブサイトは質問と回答を行う機能,またそれらに対する評価付け, wikiやdiggに似た文書の編集機能を備えており<p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p>参加を促している.Stack Overflowのユーザは良質な回答を行うことによって,評価ポイントや<p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> ,本サービスは伝統的なQ & Aサイト·フォーラムにゲーミフィケーション <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> <p>本サービスはコンピュータ・プログラミングの広範囲なトピックを扱っていることが特色である。ウェブサイトは質問と回答を行う機能、またそれらに対する評価付け、wikiやdiggに似た文書の編集機能を備えており、ユーザの活発な参加を促している。Stack Overflowのユーザは良質な回答を行うことによって、評価ポイントや「バッヂ」を得ることができ、本サービスは伝統的なQ&Aサイト・フォーラムにゲーミフィケーションを施したものと言える。全てのユーザによる記述内容はクリエイティブ・コモンズライセンス下にある。 </p> 

Here are the screenshots to show the difference.

1st paragraph without breaks in HTML

no breaks

2nd s

breaks

Also note that any solution should not destroy space in Stack Overflow

+5
source share
1 answer

Use white-space: pre or white-space: pre-wrap

Link: https://www.w3schools.com/cssref/pr_text_white-space.asp

JSFiddle: https://jsfiddle.net/kqcvp10w/

-1
source

Source: https://habr.com/ru/post/1270663/


All Articles