1

I have a long paragraph written in Chinese. Chinese does not use spaces, as the punctuation automatically adds spacing around itself. The problem is, when I put the long paragraph into VSCode, there's no way to replace the text with new lines in the source code, taking advantage of the fact that a new line in source code renders as a space in HTML. This results in a very long horizontal scrollbar.

Here's what I mean: when you have an English paragraph, you can do something like this:

<div>
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
  hello hello hello hello hello hello
</div>

In Chinese, if you did that, it would add an extra space in between the characters:

<div>
  你好。你好。
  你好。你好。
  你好。你好。
  你好。你好。
  你好。你好。
  你好。你好。
  你好。你好。
</div>

Notice the extra space in between every other gap. Instead, I want it to all be on one line, which I currently can only achieve with this ugly code:

<div>
  你好。你好。你好。你好。你好。你好。你好。你好。你好。你好。你好。你好。你好。你好。
</div>
(The code on one line is too long.)

I don't simply want to wrap the code in my editor; I want some solution where I can write it in separate lines. How do I do this?

Basically, I don't want any line breaks in the output, only in the source code.

code
  • 5,690
  • 4
  • 17
  • 39
  • Relevant: [How to remove the space between inline/inline-block elements?](https://stackoverflow.com/q/5078239). Also check out [this answer](https://stackoverflow.com/a/20473553). – InSync Apr 09 '23 at 03:38
  • Does this answer your question? [Prevent/workaround browser converting '\n' between lines into space (for Chinese characters)](https://stackoverflow.com/questions/8550112/prevent-workaround-browser-converting-n-between-lines-into-space-for-chinese) – Sylvain Chiron Apr 09 '23 at 04:00
  • 1
    CSS Text Level 3 actually requires that the spaces are removed for Chinese, and Firefox does that. So this can be regarded as a Chrome bug. Not that that helps at all, just saying. – Alohci Apr 09 '23 at 04:54
  • @SylvainChiron thanks, that's definitely related. It's over a decade though, and I'm hoping there's a bit of new light to this? – code Apr 09 '23 at 05:55
  • @Alohci ah, okay; I didn't know that. Any workarounds? – code Apr 09 '23 at 05:56
  • Even if a question is 15 years old, answers should still be updated. But I don’t know how to motivate people to look at it. – Sylvain Chiron Apr 09 '23 at 15:38

1 Answers1

0

I don’t use (and don’t like) VS Code, but usually text editors offer a setting to enable word-wrap. Even the basic Windows Notepad offers this option (which currently cannot be combined with showing the status bar though). Some people don’t like manual wrapping and use this feature of editors to be able to view long lines without any horizontal scrollbar — so it renders more or less the same as in a terminal (editors usually take care of not breaking words, terminals don’t). I think using this feature is the best way to handle your case. Sorry, I missed your statement that this is not appropriate for you.

Another solution to this problem with HTML is to wrap line feeds into comments (or any tags actually):

<div>
   你好。你好。<!--
-->你好。你好。<!--
-->你好。你好。<!--
-->你好。你好。<!--
-->你好。你好。<!--
-->你好。你好。<!--
-->你好。你好。
</div>

Note that you can easily write such comments using multiline editing: put your cursor at the top, then, while pressing Shift and Alt, click at the bottom. You will have a cursor on several lines. You can also use the End key to move all these cursors at the end of their line.

Sylvain Chiron
  • 53
  • 7
  • I don't want to just wrap the text (as specified in my question), but the comments are pretty clever, even though it may not be too practical. – code Apr 09 '23 at 03:36