<span> + <sup> having a space between spaces caused by line breaks

Question

The following HTML snippet is rendered with a space between two words (with line breaks between both lines:

<span>foo</span>
<sup>bar</sup>

However

<span>foo</span><sup>bar</sup>

displayed without spaces between both words.

So why the reason for this behavior is line break. Line break or should not affect rendering here !?

Answer 1

They are treated as spaces, so one or more line breaks are treated as single spaces (like all other space characters)

(
), feed (
) / . .

http://www.w3.org/TR/html401/struct/text.html#line-breaks

Answer 2

HTML. , , ( ). ,

<span>foo</span> <sup>bar</sup>

, , .

, ,

<span>foo</span><sup
class=zap>bar</sup>

Answer 3

For CJK characters (Chinese Japanese Korean) it can be difficult to find a breakpoint, you can insert booststrap <span class="sr-only"></span>as a way to break the line for better code reading, for example:

这是一<span class="sr-only">
</span>行无空格的文字